JavaScript Async Patterns: Callbacks to Async/Await Evolution

JavaScript Async Patterns: Callbacks to Async/Await Evolution | DevPrep

// Callback Hell / Pyramid of Doom
getUser(userId, (err, user) => {
  if (err) return handleError(err);
  getPosts(user.id, (err, posts) => {
    if (err) return handleError(err);
    getComments(posts[0].id, (err, comments) => {
      if (err) return handleError(err);
      renderPage(user, posts, comments);
    });
  });
});

async function loadPage(userId) {
  try {
    const user = await getUser(userId);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    renderPage(user, posts, comments);
  } catch (error) {
    handleError(error);
  }
}

// Bad: sequential (3 seconds)
const users = await fetchUsers();     // 1s
const posts = await fetchPosts();     // 1s
const comments = await fetchComments(); // 1s

// Good: parallel (1 second)
const [users, posts, comments] = await Promise.all([
  fetchUsers(),
  fetchPosts(),
  fetchComments()
]);

// Bad: doesn't wait for completion
items.forEach(async (item) => {
  await processItem(item); // These run in parallel, not sequential!
});

// Good: sequential
for (const item of items) {
  await processItem(item);
}

// Good: parallel
await Promise.all(items.map(item => processItem(item)));

JavaScript Async Patterns: Callbacks to Async/Await Evolution

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

Era 1: Callbacks (2009)

Era 2: Promises (2015 - ES6)

Era 3: Async/Await (2017 - ES8)

Common Async/Await Mistakes

Sequential When Parallel Is Possible

Forgetting Error Handling

Async in forEach

Top-Level Await