Lesson 4 of 8

Asynchronous code and waiting

Goal

Promises and async/await

01

Explanation

Some operations take time, like fetching data from a server, reading a file or waiting for a reply. JavaScript doesn't stop and wait for them to finish: it keeps running the rest of the code and comes back to the result when it's ready.

A Promise is a value that will arrive later, and the keyword await means "wait here until the value arrives". Any function that uses await must be declared with async.

That's why an interface needs a loading state the user can see between sending the request and getting the result. Otherwise they'll think something broke.

02

Your task

When the button is clicked, show "Loading…", then wait with wait(600), then show "Loaded".

Checks

4 checks
  1. Clicking shows a loading state right away
  2. The loading state is still there after 200 milliseconds
  3. Once the wait is over, "Loaded" appears
  4. A second click shows the loading state again
03

Hints

0/3
Track lessons0 of 8 done

Work with data, functions and operations that take time, and build up to an interface that creates its elements from data.

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

Work with data, functions and operations that take time, and build up to an interface that creates its elements from data.

Intermediate level, 8 lessons, 2 hours in total.