async and await
async and await let you write code that waits for a slow answer, such as a reply from a server, as plain step-by-step code, without freezing the page. Follow one async function from its first line to await, watch it step off the engine while the rest of the script runs, and see it come back through the microtask queue when its promise is fulfilled.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01What does the script user.js print, in order?
getUser runs until await and prints "asking". At await it pauses, so line 10 prints "not blocked". About a second later it resumes and prints "got Ada", then the .then callback prints "ADA".
02What does await do when the promise it gets is still pending?
await pauses the async function it is in. Its frame leaves the call stack, so the engine can run other code until the promise settles.
03getUser is an async function that ends with return name.toUpperCase(). What does calling getUser() give back?
Calling an async function always returns a promise. Its return value fulfils that promise, so you read it with .then or with await.
04The timer fires and fulfils the promise getUser is waiting on. When does getUser carry on?
Fulfilling the promise queues a job to resume the function. Jobs in the microtask queue run as soon as the call stack is empty.
05The awaited promise is rejected instead of fulfilled. What happens at the await line?
A rejected promise makes await throw its reason at that line. Wrap the await in try { ... } catch (err) { ... } to handle it.
Glossary
- async function
- A function declared with async. Calling it returns a promise, which its return value fulfils (or an error it throws rejects).
- await
- Pauses the async function it is in until a promise settles, then gives back the fulfilled value (or throws the rejection reason).
- Promise
- An object that stands for a value that is not ready yet. It is pending, then fulfilled with a value or rejected with an error.
- Call stack
- The engine's list of functions that are running now. The one on top runs; a paused async function is not on it.
- Microtask queue
- Where promise jobs wait, such as resuming an await or running a .then callback. They run as soon as the call stack is empty.
- Event loop
- The part of the runtime that, whenever the call stack is empty, picks the next job or task and runs it.
- setTimeout
- Asks the browser or Node.js to call a function after at least a given number of milliseconds.
Notes and sources
- wait is a stand-in for a real request. fetch(url) works the same way: it returns a promise at once, and the network fulfils it later with a Response, so you write const res = await fetch(url).
- setTimeout(res, ms, v) passes v to res. The delay is a minimum, not a promise of exact timing: the callback runs once the time has passed and the engine is free.
- Promise jobs are called microtasks. They run whenever the call stack empties, before the browser moves on to the next task such as a timer, a click or a redraw. The ECMAScript specification calls them jobs.
- If the awaited promise is rejected, await throws the error at that line, so you can catch it with try { ... } catch (err) { ... }. An error thrown inside an async function rejects its promise.
- await works inside async functions, and at the top level of JavaScript modules. In a plain script, as here, line 9 uses .then to get the result instead.
- The engine keeps a call stack of execution contexts. The figure draws the running async function as one card that leaves the stack at await and comes back when it resumes; strictly the engine suspends its context and resumes it from a promise reaction job.
Quiz Unlocks after the last step.