iDevMeet

Web Development · module 8 of 13

Async APIs & Persistence

Use promises, async/await, fetch, JSON, error handling, and localStorage to build data-driven pages.

Course map
your pagekeeps respondingserverdoes the workfetch(url) — sent, not waited onresponse arrives — maybe in 50ms, maybe in 3sconst res = await fetch(url);await pauses this function only. The page carries on scrolling, clicking and rendering —which is why a slow request does not freeze the screen the way a blocking loop does.
Async APIs & Persistence — the idea in one picture

What this module covers

5 steps · Web Development

  1. Step 1. Lesson: Async APIs & Persistence

    Use promises, async/await, fetch, JSON, error handling, and localStorage to build data-driven pages. Learning objectives - Recognize when async apis & persistence is the right tool. - Explain the role of async, fetch, json. - Build a small working example before combining it with a larger interface. - Identify one accessibility, maintainability, or error-handling improvement. Read the example, predict what it will do, then complete the small change described in the check question.

    Use promises, async/await, fetch, JSON, error handling, and localStorage to build data-driven pages. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Use the example to demonstrate async apis & persistence.

  2. Step 2. Quiz: Async APIs & Persistence

    Check your understanding of Async APIs & Persistence.

    fetch only rejects network failures; HTTP error responses still need an explicit status check. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Complete the knowledge check.

  3. Step 3. Exercise: Async APIs & Persistence

    Fetch a list, show loading and error states, then render the successful response.

    This exercise turns the Async APIs & Persistence lesson into a working code change. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Does the solution use async and fetch and json?

  4. Step 4. Review lab: Explain & improve Async APIs & Persistence

    Rebuild the exercise without copying the solution. Then improve it in two ways: make the code easier to understand and add one useful edge case, responsive behavior, accessibility improvement, or error state. Finally, write a short explanation of how async, fetch, json work together.

    Rebuilding from memory and improving an edge case turns recognition into durable skill. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Does the improved version still use async, fetch, json clearly?

  5. Step 5. Mini project: Async APIs & Persistence

    Build a weather or media search app with async data, loading feedback, errors, saved favorites, and recent searches.

    The mini project combines the module lesson, quiz, and exercise into one portfolio-ready result. In Web Lab, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Web Lab] Does the project apply the module's async apis & persistence skills?

Loading code lab...