Web Development · Beginner level

Beginner level · Module 4 of 5 · 11 guided hours

Modern JavaScript and Fetching Data

Use modern JavaScript features and load data from APIs with fetch and async/await, handling loading and errors.

Learning objectives

  • Use modern syntax and ES modules
  • Load data from an API or JSON file with fetch and async/await
  • Display loading, error and empty states

Topics

  • arrow functions, destructuring and template literals
  • ES modules
  • JSON
  • fetch and response.ok
  • async/await and try/catch
  • loading and error states

Lessons

  1. Lesson 1 Modern JavaScript Syntax and Modules

    Write shorter, clearer code with arrow functions, destructuring and template literals, and split code into modules.

    arrow functionsdestructuringtemplate literalsimport and export

  2. Lesson 2 Fetch and async/await

    Request JSON data with fetch, wait for it with async/await and check for HTTP errors.

    fetchasync/awaitresponse.oktry/catch

  3. Lesson 3 Loading, Empty and Error States

    Show users what is happening while data loads, when there is none and when something goes wrong.

    loading indicatorempty stateerror state with retryAbortSignal.timeout

Practical activity

Load the organisation's events from a JSON file with fetch, display them as cards and show loading, empty and error states.

Expected outcomes

  • Pages that load data dynamically
  • Interfaces that handle slow or failing networks

Assessment

Practical: connect a provided page to a JSON API with all three states; tested with network throttling and a broken URL.

Free taster lesson Modern JavaScript: Fetching Data with async/await Read a free self-study lesson on this topic in the Free Course Library.

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.