Book 01 · Programming FundamentalsPage 4 of 56

Async/Await

Q: Does await block the main thread?

No. await pauses only the async function it is in; the rest of the program, including the browser's user interface, keeps running. The function resumes once the awaited promise settles.

Q: Can I use await outside an async function?

In modern JavaScript, you can use top-level await directly in ES modules. In classic scripts and CommonJS files, await must be inside an async function.

Pronunciation: AY-sink uh-WAYT

Updated September 29, 20262 min read

In short

Async/await is a syntax for writing asynchronous code that reads like ordinary step-by-step code, pausing at each await until a promise or task finishes.

What is async/await?

Async/await is a pair of keywords that makes asynchronous code, meaning code that waits for things like network requests or file reads, easier to write and read. You mark a function with async, and inside it you put await in front of an operation that takes time. The function then pauses at that line until the result is ready and continues with the value.

In JavaScript, async/await is built on promises. An async function always returns a promise, and await waits for a promise to settle, giving you its value or throwing its error. Because of this, you can handle failures with a regular try/catch block instead of chaining .catch() calls.

Pausing with await does not freeze the whole program. While one function is waiting, the runtime keeps doing other work, such as responding to clicks or handling other requests, and resumes the function when its result arrives. It's like putting a pot of water on the stove and chopping vegetables while it heats, instead of standing and staring at the pot.

The async/await pattern also exists in many other languages, including C#, Python, Rust, Kotlin, and Swift. A common mistake is awaiting independent operations one after another, which makes them run in sequence; if they don't depend on each other, start them together and wait for all of them with Promise.all.

At a glance

await pauses only this function. The rest of the program keeps running until the promise settles, then the function picks up where it stopped.

Key takeaways

async marks a function as asynchronous; in JavaScript it always returns a promise.
await pauses only the current function, not the whole program, until a promise settles.
Errors can be handled with ordinary try/catch blocks.
Use Promise.all to run independent operations in parallel instead of awaiting them one by one.

Example

Loading data with async/awaitjavascript

// An async function can use await inside it
async function loadUser(id) {
  try {
    const response = await fetch(`https://api.example.com/users/${id}`);
    if (!response.ok) throw new Error("HTTP " + response.status);
    return await response.json(); // wait for the body to be parsed
  } catch (error) {
    console.error("Could not load user:", error);
  }
}

// Run two independent requests at the same time
const [first, second] = await Promise.all([loadUser(1), loadUser(2)]);

Readers ask

Does await block the main thread?

No. await pauses only the async function it is in; the rest of the program, including the browser's user interface, keeps running. The function resumes once the awaited promise settles.

Can I use await outside an async function?

In modern JavaScript, you can use top-level await directly in ES modules. In classic scripts and CommonJS files, await must be inside an async function.

What is the difference between async/await and promises?

Async/await is syntax built on top of promises, not a replacement for them. It lets you write the same promise-based logic in a more linear, readable style.

Sources

MDN: async functiondeveloper.mozilla.org(opens in a new tab)

Spotted a mistake or something missing on this page?Suggest an edit