Stop 04 · JavaScriptTopics · 17/36

Async Await

In short

async and await let you write asynchronous code that reads top to bottom like a normal recipe. Same Promises underneath, far fewer brackets and headaches.

Syntactic sugar over Promises that lets asynchronous code read like synchronous code, using `async` functions and the `await` keyword. `async`/`await` improves readability, but developers still need to understand Promise concurrency, rejection handling, sequential versus parallel execution, and cleanup.

The jaadu mascot watches a kitchen timer over a pot of noodles while a roommate makes tea.

Think of it like this

Making Maggi

Boil water, wait. Add noodles, wait two minutes. Add tastemaker. await is you saying "finish this step before the next". But the kitchen isn't frozen: your roommate can still make tea meanwhile. Only your recipe waits.

Watch it happen

loadUser(1), step by step

loadUser()

Browser

API server

await fetch(/users/1)

1/6loadUser starts the request and pauses here. The rest of the page keeps working.

The big ideas

What you need to know

async returns a Promise

Put async before a function and it always returns a promise, even if you return a plain value.

await pauses only that function

await waits for a promise to settle. The rest of the page keeps running, clicks still work.

Errors go to try/catch

If an awaited promise rejects, it throws right there. Wrap it in try/catch, just like normal code.

Don't wait in a line for no reason

If two requests don't depend on each other, start both and await Promise.all([a, b]).

See it in code

Walk through the code

1async function loadUser(id) {2  try {3    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);4    if (!res.ok) throw new Error("HTTP " + res.status);5    const user = await res.json();6    console.log(user.name);7  } catch (err) {8    console.log("Failed:", err.message);9  }10}11 12loadUser(1);     // "Leanne Graham"13loadUser(9999);  // "Failed: HTTP 404"

1/4async lets you use await. fetch is awaited, so res is the real response.

fetch only rejects on network failure. A 404 or 500 still resolves, so check res.ok yourself and throw if it's false.

Save yourself the pain

Common mistakes

Oops

Forgetting await and logging the result.

Do this instead

You'll see Promise { <pending> }. Add await, or use .then, to get the actual value.

Oops

Awaiting independent requests one after another in a loop.

Do this instead

Each waits for the last. Use await Promise.all(ids.map(loadUser)) to run them together.

Oops

Assuming fetch throws on a 404.

Do this instead

It doesn't. Check if (!res.ok) and handle it yourself.

Your mission

Load posts the modern way

~25 min

Quick check

What does this log? async function f() { return 5; } console.log(f());

Go deeper

1Rewrite a `.then()` chain using `async`/`await` and `try`/`catch`. Validate your understanding by applying it in a small practical example.
2Fetch real data from a public API using `async`/`await`. Validate your understanding by applying it in a small practical example.
3Learn that `await` only pauses within its own `async` function, not the whole program.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download