Loading...
Spaceplay← →stepRreset
See how async/await works with an interactive visualization. Watch an async function pause at await, hand control back to the caller, resume from the microtask queue, and compare sequential awaits with Promise.all.
Loading visualization...
async/await is syntax that lets a function pause on a promise and resume later without callbacks. Under the hood it is promise.then plus a suspended stack frame, scheduled through the microtask queue.
An async function is a normal function with two guarantees: it always returns a promise, and it can use await inside its body. Callers get a promise immediately, even if the body has not finished, and the eventual return value or thrown error becomes that promise's fulfillment value or rejection reason.
await takes any value, converts it to a promise, and suspends the function until that promise settles. The engine saves the current stack frame, registers the rest of the function as the promise's reaction, and returns control to whoever called the async function. When the promise settles, the reaction runs as a microtask and the frame is restored with the awaited value in place of the await expression.
The mechanism is the same one generators use. A generator pauses on yield and resumes on next(); an async function pauses on await and is resumed by a promise reaction. Early transpilers literally compiled async/await into a generator driven by a promise loop, and V8's implementation still shares the suspend and resume machinery.
Because resumption happens through microtasks, async code interleaves with other work at predictable points. Everything before the first await runs synchronously on the caller's stack. Everything after runs later, after the current synchronous code finishes and before any timer or I/O callback, because the event loop drains the microtask queue between tasks.
Interview framing: define Async/Await in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
Writing const a = await f(); const b = await g(); means g() does not even start until f() has settled. Two 100 ms requests take 200 ms, because each timer is created only after the previous await resumes.
Fix: Start every independent promise first, then await them together with Promise.all (or Promise.allSettled when partial failure is acceptable). Reserve sequential awaits for calls that depend on earlier results.
Calling an async function without await and without .catch discards its promise. If that promise rejects, the error never reaches any handler, the host reports an unhandled rejection, and Node exits with a non-zero code by default.
Fix: Either await the call inside a try/catch, attach .catch at the call site, or deliberately mark it with void and a catch handler when fire-and-forget is intended.
return fetchData() inside a try block returns the promise without inspecting it. The try completes normally, the catch never runs, and the rejection is only visible to the caller. Adopting the returned promise also costs extra microtask ticks compared with awaiting it.
Fix: Use return await when the function has a try/catch or finally that must observe the rejection. Outside of try blocks, plain return promise is fine and marginally cheaper.
await suspends only the async function it appears in. The caller, other tasks, and other async functions keep running. Code that reads shared state after an await may see values changed by something that ran in between.
Fix: Treat every await as a point where other code can run. Re-read state after resuming rather than caching it before the await, and avoid holding assumptions across suspension points.
Common interview prompts with concise model answers.
It always returns a promise. The body starts immediately and runs synchronously on the caller's stack until the first await. Only then does the function suspend and hand a pending promise back to the caller.
console.log('A');
async function run() {
console.log('B');
await null;
console.log('C');
}
run();
console.log('D');
// A, B, D, Cawait wraps its operand with PromiseResolve, so a non-promise becomes an already fulfilled promise. The continuation is still scheduled as a microtask rather than running inline, so the function suspends for one tick even though there was nothing to wait for.
Both suspend a stack frame and resume it later. A generator pauses at yield and is resumed by next(); an async function pauses at await and is resumed by a promise reaction. async/await can be expressed as a generator driven by a loop that awaits each yielded promise, and that is how early transpilers implemented it.
function run(gen) {
const it = gen();
const step = (value) => {
const { value: p, done } = it.next(value);
return done ? p : Promise.resolve(p).then(step);
};
return step();
}
run(function* () {
const a = yield fetchUser(1);
console.log(a);
});Inside a try/catch or finally. return promise exits the try before the promise settles, so a rejection skips the local catch and surfaces to the caller instead. return await rethrows the rejection at the await, where the catch can handle it.
async function leaky() {
try { return fail(); } catch { /* never runs */ }
}
async function safe() {
try { return await fail(); } catch (e) { return 'handled'; }
}Sequential awaits take about 200 ms because the second request is not created until the first has resolved. Promise.all takes about 100 ms because both requests are started before the function suspends, so their timers overlap and the total is the slowest one.
Continue with these concepts to strengthen your mental model.
console.log('A');async function run() { console.log('B'); await null; console.log('C');}run();console.log('D');empty
empty
no async calls yet
No output yet.