async / await

By the end of this lesson you will be able to:

1. Rewrite a .then() chain as an async function.
2. Use await to get the value out of a promise directly.
3. Explain why await pauses your function but not the page.
4. Fetch two things one after the other, in four readable lines.

Your working chain from last lesson, with a second city added. Try saying what it does, in order, without pausing.

fetch(klUrl)
  .then((response) => response.json())
  .then((data) => {
    showKL(data);
    return fetch(penangUrl);
  })
  .then((response) => response.json())
  .then(showPenang);

Predict together

• Which .then() receives the Penang response?
• Where would a third city go?

With .then() you leave instructions at the counter and walk away: “when my order is ready, do this”. With await you sit down in the waiting area until your number is called.

Here is the part that matters: you are sitting down, not the whole restaurant. The staff keep serving everyone else.

Two keywords

async function loadWeather() {
  const response = await fetch(url);
  const data = await response.json();

  console.log(data.current.temperature_2m);
}

loadWeather();

• async before a function means “this one may wait”.
• await before a promise means “pause here, then give me the value”.

await fetch(url) gives you the Response itself, not a promise. The unwrapping the .then() did for you now happens on the line.

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    show(data);
  });

const response = await fetch(url);
const data = await response.json();

show(data);

Identical behaviour. Identical promises underneath. Only the writing changed — which is why last lesson had to come first.

Three rules that catch people out

1. await only works inside an async function. Use it anywhere else in your script and you get a SyntaxError.
2. An async function always returns a promise — even if you return a plain number. So calling one gives you a promise, not the value.
3. Calling it does not wait for it. loadWeather() starts the work and moves on immediately, exactly like fetch itself.

It does not freeze the page

The word “await” sounds like the blocking loop from Lesson 19. It is the opposite.

At an await, your function steps out of the lane and lets everything else run. Buttons still click, animations still play. When the promise settles, your function picks up where it left off.

Why it matters

Nearly all modern JavaScript is written this way. You will still read plenty of .then() in other people's code, so you need both — but this is the one you will write.

Take the weather page from last lesson and convert it. Keep the old version in a comment so you can compare.

Step 1 — Wrap the work in an async function

async function loadWeather() {
  const response = await fetch(url);
  const data = await response.json();

  output.textContent = `${data.current.temperature_2m} °C`;
}

Four lines replace the chain. Read them downwards — that is the whole point.

Step 2 — Call it from the click

load.addEventListener('click', () => {
  status.textContent = 'Loading...';
  loadWeather();
});

The listener itself needs no async, because it does not await anything. Only the function that waits is marked.

Step 3 — Prove the page is still alive

Add the counter button from Lesson 19 beside it. Click Get the weather, then hammer the counter while it loads.

The number keeps climbing. Compare that with the blocking loop in Lesson 19, where it froze solid. Same word in English, opposite behaviour in code.

Step 4 — Two cities, read downwards

async function loadBoth() {
  const klResponse = await fetch(klUrl);
  const klData = await klResponse.json();
  klOutput.textContent = `KL: ${klData.current.temperature_2m} °C`;

  const pgResponse = await fetch(penangUrl);
  const pgData = await pgResponse.json();
  pgOutput.textContent = `Penang: ${pgData.current.temperature_2m} °C`;
}

What changed? Compare this with the Warm-Up chain. A third city is now three more lines at the bottom — no hopping, no nesting, nothing to rearrange.

Step 5 — The trap: an async function returns a promise

async function getTemperature() {
  const response = await fetch(url);
  const data = await response.json();

  return data.current.temperature_2m;
}

const temperature = getTemperature();
console.log(temperature);

Promise { <pending> }

That log should feel familiar — it is Lesson 20's Warm-Up all over again. The return inside an async function fulfils its promise; it does not hand the value out.

async function show() {
  const temperature = await getTemperature();
  console.log(temperature);
}

show();

29.8

To unwrap a promise you must await it, and to await it you must be inside an async function. Every escape from that leads back to the same rule.

One thing still missing

There is no .catch() anywhere now. If the fetch fails, this code has nothing to say. Fixing that is the next lesson, and it closes the section.

Work in your rewritten weather page.

1. Task 1 — Convert the countdown

   Take the wait() promise from Lesson 22 and write the 3-2-1 countdown as an async function with three await wait(1000) lines between the updates.

   Compare it with the chained version. Which reads better?

2. Task 2 — Break it on purpose

   Put an await at the top level of your script, outside any function. Read the error message and write down exactly what it says.

   Then move it back inside and confirm the error clears.

3. Task 3 — One function, any city

   Write async function getTemperature(latitude, longitude) that builds its own URL and returns just the number.

   Call it three times for KL, Penang and Johor Bahru, awaiting each, and show the three results. Lesson 8's parameters and Lesson 3's template literals do the rest.

Nurul's page shows [object Promise] °C and her console reports an error before anything runs. Find three mistakes.

// nurul-weather.js — buggy
const output = document.querySelector('#output');

function loadWeather() {
  const response = await fetch(url);
  const data = response.json();

  return data.current.temperature_2m;
}

output.textContent = `${loadWeather()} °C`;

It works if: the paragraph shows something like 29.8 °C, with no error in the console.

// nurul-weather.js — fixed
const output = document.querySelector('#output');

async function loadWeather() {
  const response = await fetch(url);
  const data = await response.json();

  return data.current.temperature_2m;
}

async function show() {
  const temperature = await loadWeather();
  output.textContent = `${temperature} °C`;
}

show();

• async marks a function that may wait; await unwraps a promise.
• Same promises as Lesson 22 — only the writing is different.
• await works only inside an async function.
• An async function always returns a promise, whatever you return inside it.
• Calling one does not wait for it — you must await the call.
• await pauses your function, not the page. Nothing freezes.
• Values land in ordinary variables, so steps read straight down the page.
• [object Promise] on screen means a missing await.

New words

• async function — a function allowed to pause, which always returns a promise.
• await — pause until a promise settles, then take its value.

Where this is going

Your code is readable but fragile — one failed request and it stops silently. The last lesson of Section C makes it honest with the user when things go wrong.