Stop 03 · HTML, CSS & JavaScript EssentialsTopics · 8/11

Asynchronous JavaScript

Part of the Full Stack Developer Roadmap

In short

Calling your API, reading the database, sending an email: none of these finish instantly. Async JavaScript lets your code wait for them without freezing the page or blocking the server.

Promises and async/await — the patterns you'll use constantly to fetch data from your backend, query a database, or wait on any operation that doesn't complete instantly.

The mascot hands clothes to an ironing man, takes a slip and walks off carrying books.

Think of it like this

The ironing cart slip

You drop your clothes at the press-wala's cart and get a small slip. You don't stand there for an hour. You go to class, and when the clothes are ready you swap the slip for them. A Promise is that slip, await is collecting it.

Watch it happen

What await really does

Click handler

Browser

API server

fetch("/api/profile")

1/6Your handler asks the browser to make a request. fetch returns a pending Promise right away.

The big ideas

What you need to know

A Promise is a future value

It starts pending, then becomes fulfilled with a value or rejected with an error. You react to whichever happens.

await pauses one function

await waits inside an async function only. The rest of the page or server keeps running meanwhile.

Promise.all runs things together

Two independent API calls? Start both with Promise.all instead of awaiting one after the other. It's often twice as fast.

fetch doesn't throw on 404

fetch only rejects on network failure. Check res.ok yourself, or a 500 error looks like success.

See it in code

Walk through the code

1async function getJson(url) {2  const res = await fetch(url);3  if (!res.ok) throw new Error(`HTTP ${res.status}`);4  return res.json();5}6async function loadDashboard(id) {7  try {8    const [profile, orders] = await Promise.all([9      getJson(`/api/users/${id}`),10      getJson(`/api/users/${id}/orders`),11    ]);12    render(profile, orders);13  } catch (err) {14    showError("Couldn't load your dashboard. Try again?");15  }16}

1/4A small helper that waits for the response and turns 4xx or 5xx into a real error.

The same async/await style works in Node when you wait on the database instead of fetch.

Save yourself the pain

Common mistakes

Oops

Using await inside a forEach loop and expecting it to wait for each item.

Do this instead

forEach ignores the promises. Use for...of to go one by one, or Promise.all with map to run them together.

Oops

Forgetting try/catch, so one failed request leaves a spinner forever.

Do this instead

Wrap awaits in try/catch and always show an error state when something fails.

Your mission

Load two things at once

~20 min

Quick check

Your server returns 500 Internal Server Error. What does await fetch(url) do?

Go deeper

1Fetch data from an API using both `.then()` chains and async/await, and compare readability.
2Practice `Promise.all()` to run multiple independent requests in parallel.
3Learn to handle errors correctly with `try`/`catch` around `await`.