JavaScript · Intermediate level

Intermediate level · Module 3 of 6 · 16 guided hours

Fetch, APIs and JSON in the Browser

Request data from web APIs with fetch, send data, check responses and handle every state the user can see: loading, empty, error and offline.

Learning objectives

  • Fetch and send JSON with the fetch API
  • Check status codes and handle network errors
  • Design user interfaces for loading, empty, error and offline states

Topics

  • HTTP requests and status codes
  • fetch with GET
  • POST with JSON bodies and headers
  • response.ok and error handling
  • AbortController and timeouts
  • UI states and caching

Lessons

  1. Lesson 1 Getting Data with fetch

    Request JSON from an API with fetch, check the response and display the data.

    fetchResponse objectresponse.ok and statusresponse.json()

  2. Lesson 2 Sending Data and Working with Headers

    Send JSON to an API with POST, set headers and handle validation errors returned by the server.

    method and bodyContent-Type headerJSON.stringify for bodiesvalidation error responses

  3. Lesson 3 Loading, Error, Empty and Offline States

    Design and implement every state a data-driven interface can be in, add timeouts and cache the last good data.

    UI stateAbortController and timeoutsnavigator.onLinecached fallback

Practical activity

Build a page that fetches exchange rates, shows a loading indicator, displays errors helpfully and falls back to cached rates when offline.

Expected outcomes

  • Reliable API integration
  • Interfaces that never leave users guessing

Assessment

Practical: integrate a documented practice API with all four UI states; tested by the instructor with the network switched off.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.