Stage 1 · Lesson 8 of 8
Fetching data with loading, empty and error states
This topic ties the stage together. You call an with , the browser's built-in request function, then show the right thing for every outcome. fetch returns a promise for a Response object.
A real screen has at least four states. There is loading, and empty (the request worked but returned nothing). There is an error with a way to retry, and finally the data itself.
Use AbortController to cancel a request the user no longer needs, such as an old search while they are still typing. Build this once in plain . You will then recognise the same states in and in your own API responses later.
Common trapthat fetch only fails on a network error: a or 500 status still counts as success, so check response.ok before calling response.json().
A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- CoursePaidGrokking JavaScript Fundamentals
Design Gurus · Beginner · $50
Guided course on the language core if you want structure and quizzes
- CourseFreeThe Odin Project
The Odin Project · Beginner
Free Foundations course: HTML, CSS and JavaScript built in your own editor
Practise
Keep handy
Also worth your time
The request path from browser to server that the rest of this roadmap builds on