Understanding Async/Await: How JavaScript Handles Asynchronous Code – HackemTU

If you’ve ever seen Promise {<pending>} in your console and wanted to throw your laptop, this article is for you. Asynchronous JavaScript is confusing because it works differently from most programming languages. Let me demystify it.

Índice

Why Does JavaScript Need Async?

JavaScript runs on a single thread. That means it can only do one thing at a time. But what about network requests that take 2 seconds? Do we freeze the entire browser?

Obviously not. Instead, JavaScript says “start this request, and call me when it’s done” – then continues doing other things. That’s asynchronous programming.

The Evolution: Callbacks → Promises → Async/Await

Era 1: Callback Hell

getUser(userId, function(user) {
  getOrders(user.id, function(orders) {
    getOrderDetails(orders[0].id, function(details) {
      console.log(details);
      // This nesting goes deeper and deeper...
    });
  });
});

This “pyramid of doom” made code unreadable and error handling a nightmare.

Era 2: Promises

getUser(userId)
  .then(user => getOrders(user.id))
  .then(orders => getOrderDetails(orders[0].id))
  .then(details => console.log(details))
  .catch(error => console.error('Something failed:', error));

Better! Flat chain instead of nested callbacks. But still not intuitive for complex logic with conditions and loops.

Era 3: Async/Await (What You Should Use)

async function getFullOrderInfo(userId) {
  try {
    const user = await getUser(userId);
    const orders = await getOrders(user.id);
    const details = await getOrderDetails(orders[0].id);
    return details;
  } catch (error) {
    console.error('Something failed:', error);
  }
}

This reads like synchronous code but runs asynchronously. The await keyword pauses the function until the promise resolves, but doesn’t block the entire thread.

Common Mistakes (That Bite Everyone)

Mistake 1: Sequential when you could be parallel

// SLOW - waits for each one before starting the next
const users = await getUsers();
const products = await getProducts();
const orders = await getOrders();

// FAST - runs all three simultaneously
const [users, products, orders] = await Promise.all([
  getUsers(),
  getProducts(),
  getOrders()
]);

If the requests don’t depend on each other, use Promise.all(). This can cut response times dramatically.

Mistake 2: Forgetting await

// BUG: data is a Promise, not the actual data
const data = fetchData();
console.log(data); // Promise {<pending>}

// FIX: add await
const data = await fetchData();
console.log(data); // actual data

Mistake 3: Using async in a forEach loop

// BROKEN - forEach doesn't wait for async callbacks
items.forEach(async (item) => {
  await processItem(item); // These run in parallel, not sequence!
});

// FIXED - use for...of for sequential processing
for (const item of items) {
  await processItem(item);
}

When to Use What

Async/await: Default choice for most situations. Clean, readable, easy error handling.

Promise.all(): When you have multiple independent async operations and want them to run in parallel.

Promise.allSettled(): When you want all promises to complete even if some fail.

Raw promises with .then(): When you’re chaining simple transformations and don’t need complex logic.

Understanding async JavaScript isn’t about memorizing syntax – it’s about understanding that JavaScript does one thing at a time but can schedule things to happen later. Once that clicks, everything else follows.