async and await

Why async/await?

Promise chains are better than callbacks, but long chains with branches and loops are still awkward. async/await (ES2017) is syntax on top of promises that lets you write the same logic top to bottom, with normal if, for and try/catch.

async function checkout(userId) {
  try {
    const user = await getUser(userId);
    const cart = await getCart(user.id);
    if (cart.items.length === 0) return 'Cart is empty';
    const payment = await charge(user, cart.total);
    return `Paid ₹${payment.amount}`;
  } catch (err) {
    return `Checkout failed: ${err.message}`;
  }
}

Rules of async and await

• An async function ALWAYS returns a promise. return 5 inside it gives a promise fulfilled with 5; throwing gives a rejected promise.
• await can be used inside async functions (and at the top level of ES modules).
• await promise pauses only this function until the promise settles, then gives its value, or throws its error.
• While the function is paused, the rest of the program keeps running.

async function getFive() { return 5; }
console.log(getFive());               // Promise { 5 } (not 5!)
getFive().then((n) => console.log(n)); // 5

Sequential versus parallel

Each await waits before starting the next line. If two calls do not depend on each other, start them both first and then wait for both with Promise.all. This can make a page load twice as fast.

// Slow: about 300 + 300 = 600 ms
const profile = await getProfile(id);
const orders = await getOrders(id);

// Fast: about 300 ms, both run at the same time
const [profile2, orders2] = await Promise.all([getProfile(id), getOrders(id)]);

Common mistakes

1. Forgetting await: const user = getUser(id); gives a Promise, so user.name is undefined.
2. Using await inside forEach: items.forEach(async (i) => await save(i)) does NOT wait; forEach ignores the returned promises. Use for…of for one-by-one, or Promise.all(items.map(save)) for all at once.
3. Awaiting in a loop when the calls are independent: slow. Use Promise.all.
4. Not catching errors: an await that rejects throws inside the function; without try/catch, the async function's promise rejects and someone must handle it.

// waits for each save in order
for (const item of items) {
  await save(item);
}
// or start all and wait once
await Promise.all(items.map((item) => save(item)));