Skip to main content

JavaScript Fetch API — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the JavaScript Fetch API lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Exercises(5)

  1. 1

    Read JSON from a response

    easy10 min

    Use the two-step fetch chain to report the name.

  2. 2

    Use await instead

    easy10 min

    Rewrite the same request with async and await.

  3. 3

    Check the status

    easy10 min

    Report the failure when response.ok is false.

  4. 4

    Catch a network failure

    easy10 min

    Catch a rejected fetch and report the message.

  5. 5

    Send data

    medium10 min

    Send a name in the body and report what came back.

Find the bug(5)

  1. 1

    Fix the response used as the data

    easy8 min

    The response is not the body; json() must be called.

  2. 2

    Fix the missing await on json

    easy8 min

    json() returns a promise, so its value must be awaited.

  3. 3

    Fix the status never checked

    easy8 min

    fetch does not reject on 404, so response.ok must be tested.

  4. 4

    Fix the object sent without stringify

    easy8 min

    The body must be a string.

  5. 5

    Fix json used on plain text

    easy8 min

    A text response should be read with text().

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace