Skip to content
Optimal Lab

Frontend · interactive

Promises and async/await

await pauses only the async function it's in. The caller, and the rest of the page, keep running. Step through the order things happen, then see why awaiting one call after another is often slower than it needs to be.

  1. async function load() {
  2. log("B: load starts");
  3. const user = await getUser();
  4. log("E: got " + user);
  5. }
  6. log("A: script starts");
  7. load();
  8. log("C: load() returned a promise");
  9. setTimeout(() => log("F: timer"), 0);
  10. log("D: script ends");

output: A

Synchronous code runs top to bottom.

Show

step 1 of 9
1

An async function returns a promise at once

Its body runs synchronously until the first await, then the caller gets a pending promise back.

Output so far: A B C.

2

await parks the rest of the function

The code after await becomes a callback for when the promise settles. Nothing blocks.

Resumes as a microtask, before timers.

3

Start together, await together

If calls don't depend on each other, start them all and await Promise.all. Total time is the slowest, not the sum.

await Promise.all([getUser(), getOrders()])

4

Handle rejections

Wrap awaits in try/catch. Promise.all rejects on the first failure; use Promise.allSettled when you want every result.

An unhandled rejection is a silent bug.

In production

Tools and technologies

async/await is built into every JavaScript runtime.

Not tied to one language — use these names when you search docs or design a system.