Async JavaScript Explained: Promises, Async/Await, and Common Pitfalls

Async/await is syntactic sugar over Promises that makes async code look synchronous:

// With Promises
function getUser() {
  return fetch('/api/user')
    .then(res => res.json())
    .then(user => fetch(/api/posts?userId=${user.id}))
    .then(res => res.json())
    .then(posts => ({ user, posts }));
}

// With async/await (same behavior, much cleaner)
async function getUser() {
  const userRes = await fetch('/api/user');
  const user = await userRes.json();
  
  const postsRes = await fetch(/api/posts?userId=${user.id});
  const posts = await postsRes.json();
  
  return { user, posts };
}

Rules:

• await can only be used inside async functions (or at the top level of ES modules)
• async functions always return a Promise
• If an awaited Promise rejects, it throws — use try/catch

The most common async bug is unhandled rejections. Always handle errors:

// Pattern 1: try/catch (most common)
async function loadData() {
  try {
    const data = await fetchJSON('/api/data');
    return data;
  } catch (error) {
    console.error('Failed to load:', error.message);
    return null; // or throw to propagate
  }
}

// Pattern 2: Wrapper function (avoids try/catch boilerplate)
async function safe(promise) {
  try {
    const result = await promise;
    return [result, null];
  } catch (error) {
    return [null, error];
  }
}

const [user, error] = await safe(fetchUser(1));
if (error) {
  console.error('Failed:', error.message);
}

Never do this:

// BAD: swallows all errors silently
async function loadData() {
  const data = await fetch('/api/data').catch(() => {});
  // data is undefined on error — leads to confusing bugs later
}

Sequential (slow):

// Takes ~3 seconds (1s + 1s + 1s)
const user = await fetchUser();
const posts = await fetchPosts();
const comments = await fetchComments();

Parallel (fast):

// Takes ~1 second (all run simultaneously)
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments(),
]);

Parallel with error tolerance:

// Don't fail everything if one request fails
const results = await Promise.allSettled([
  fetchUser(),
  fetchPosts(),
  fetchComments(),
]);

results.forEach(result => {
  if (result.status === 'fulfilled') {
    console.log('Success:', result.value);
  } else {
    console.log('Failed:', result.reason);
  }
});

Use Promise.all when: all results are needed — if one fails, you want everything to fail. Use Promise.allSettled when: partial results are useful — some can fail without breaking the page.

1. forEach doesn't work with async:

// BAD: doesn't wait for any of these
ids.forEach(async (id) => {
  await processItem(id); // Fire-and-forget!
});

// GOOD: use for...of for sequential
for (const id of ids) {
  await processItem(id);
}

// GOOD: use Promise.all for parallel
await Promise.all(ids.map(id => processItem(id)));

2. Forgetting await:

// BAD: user is a Promise, not the data
const user = fetchUser(); // Missing await!
console.log(user.name); // undefined

// GOOD
const user = await fetchUser();
console.log(user.name); // 'Alice'

3. Sequential awaits in loops when parallel is fine:

// SLOW: processes one at a time
for (const url of urls) {
  const data = await fetch(url);
}

// FAST: fetches all in parallel
const results = await Promise.all(
  urls.map(url => fetch(url).then(r => r.json()))
);

4. Async function in a constructor:

// BAD: constructors can't be async
class DB {
  constructor() {
    this.connection = await connect(); // SyntaxError!
  }
}

// GOOD: use a static factory method
class DB {
  static async create() {
    const db = new DB();
    db.connection = await connect();
    return db;
  }
}
const db = await DB.create();