Rullst AcademyRullst Academy/Lesson
JavaScript and interaction · Lesson 12 / 14

Fetch: receiving is not trusting

Receiving a response is only the start of reading data.

Learning paths18 min

Let's discover together

  1. 1

    fetch returns a Promise of a Response. HTTP status 404 or 503 normally fulfills that promise; check response.ok. Network failures can reject it without a Response accessible to your code.

  2. 2

    await response.json() reads and parses the body and can fail. Valid JSON may have the wrong shape: here we need an array, unique ids, titles, valid minutes and a boolean done. Do not trust data just because a response delivered it.

  3. 3

    Rullst Academy suggestion scenarios are simulated without suggestion requests. For real HTTP, open a terminal in the extracted kit and run python server.py on Windows or python3 server.py on macOS/Ubuntu. Visit http://127.0.0.1:8768; see README for Python setup if needed and stop with Ctrl+C. In this activity’s lesson.js, change case=ready to case=http, case=json or case=shape, save and reload to compare responses.

  4. 4

    Opening file:// does not reproduce an HTTP origin. Do not disable browser protections to work around this. The kit server listens only locally and serves allowed files and fictional data. No key, API account or external service is required.

From the example to your own interaction

Download this activity kit, extract it and open index.html in a browser. Edit lesson.js, save and reload. You do not need Node or packages. README explains local HTTP when needed.

The demonstration uses supplied JavaScript. It does not execute your editor code. Download your edit separately to test in the local kit.

My files and GitHub
Try the project we will build

Small mission planner

Create, complete and review a study plan using fictional data. Missions stay only in this page’s memory and disappear on reload.

Use a short title without personal data and whole minutes from 1 to 120. Up to 20 missions.

Missions in the plan
0
Minutes across all missions
0
Completed missions
0

No missions in this filter. Add one or choose another filter.

    Suggestion lab

    Scenarios are simulated in this browser by default. No suggestion request is sent and your plan is not replaced.

    Available in the kit opened at http://127.0.0.1:8768. See README; no external account is needed.

      This JSON contains only missions, not your code. The demonstration does not import files or synchronize devices. Download edited JavaScript from the lesson file workspace.

      Official links and next step

      ✦
      YOUR MISSION

      Distinguish network failure, HTTP status, JSON and expected data shape.

      Now it's your turn

      Discovery workshop

      Think before running

      One request receives HTTP 503; another receives HTTP 200 with valid JSON but missing required fields.
      Build your answers and check when you are ready.
      A moment to understand

      How do you run the fetch activity with an HTTP origin?

      I need a hint

      Predict the result, run your file and explain the difference.

      Loading your journey…

      Take it with you

      Run success, HTTP 503, broken JSON and wrong shape. In Network, record status and body; compare with interface messages.

      At your own pace

      My files and GitHub

      Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

      Student guide

      The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

      Checking your access to this lesson…

      Rullstpetbot

      AI can make mistakes. Check the lesson material.