Async/Await: Write Non-Blocking Code That Reads Synchronously

Why it exists

JavaScript is single-threaded, meaning long-running operations like network requests would block the entire application if run synchronously. Promises were created to manage this, but chaining .then() calls can become hard to read. Async/await was introduced to provide a cleaner, more readable syntax for working with Promises.

The mental model

Think of async/await as a "pause and resume" button for your functions. When a function sees the await keyword, it tells the JavaScript engine: "Pause this function, go do other work, and come back to this exact spot once the awaited promise is settled." This makes the code look synchronous and blocking, but it's actually non-blocking under the hood, keeping the application responsive.

How it works

Declaring a function with the async keyword does two things: it ensures the function always returns a Promise, and it allows you to use the await keyword inside it. If you return a non-Promise value (e.g., return 42;), JavaScript automatically wraps it in a resolved Promise (Promise.resolve(42)). The await keyword, which can only be used inside an async function, is placed before a call to a function that returns a Promise. It pauses the async function until the Promise resolves and returns its value. If the Promise rejects, await throws an error that can be caught with a standard try...catch block.

When to use it

Use async/await whenever you are consuming a Promise-based API, which is the modern standard for most asynchronous tasks in JavaScript. This includes making network requests with fetch, interacting with a database, or reading files in Node.js. It is especially useful for coordinating multiple sequential asynchronous steps where one operation depends on the result of the previous one.

When not to use it

Be careful when you need to run multiple asynchronous operations concurrently. Awaiting them sequentially will be much slower than starting them all at once with a method like Promise.all(). Use sequential await only when tasks are dependent on each other. Also, do not use await on a function that doesn't return a Promise; it has no effect and can be misleading.

One canonical example

Fetching user data from an API. Without async/await, you'd use a promise chain:

fetch('api/user/123').then(response => response.json()).then(user => console.log(user));

With async/await, the logic becomes linear and allows for try/catch blocks:

async function fetchUser() {
try {
const response = await fetch('api/user/123');
const user = await response.json();
console.log(user);
} catch (error) {
console.error('Failed to fetch user:', error);
}
}

This version is far easier to read and debug.