Lesson 2 of 8

Fetching data with await

Goal

Await the data, then show it

01

Explanation

Every data fetch goes through the same three steps: you request the data, wait for it to arrive, then display it. The await keyword turns the waiting into an ordinary line of code instead of a chain of then calls.

Here we use api(), a mock function that behaves exactly like fetch: it returns a promise that resolves a moment later. The only difference is that it doesn't need a network, so what you learn here is exactly what you'll write with fetch.

And remember: any function that uses await has to be async.

02

Your task

Fetch the data when the button is clicked, and show the city and the temperature.

Checks

4 checks
  1. The values are empty before the click
  2. The city appears after the fetch
  3. The temperature appears
  4. The fetch really waits and the result doesn't appear instantly
03

Hints

0/3
Track lessons0 of 8 done

Learn to read JSON, wait for the server to respond, and handle loading and failure states. That's what separates a demo from a product people can rely on.

Intermediate level, 8 lessons, 2 hours in total.

index.html
Preview
index.html100%
–/4

Press “Run and check” to grade your code.

4 checks listed under “Your task”.

Track lessons0 of 8 done

Learn to read JSON, wait for the server to respond, and handle loading and failure states. That's what separates a demo from a product people can rely on.

Intermediate level, 8 lessons, 2 hours in total.