getJSON: POST, check ok, handle every outcome
The 422 reply resolved normally; postJSON turned it into an error because res.ok was false. Only the network failure was a rejected promise from fetch itself. Clear the input and press Save to see the error on the page.
fetch(url, options) sends an HTTP request and returns a promise for a Response; it only rejects on network failure, so you must check response.ok yourself, read the body once with json() or text(), and use an AbortController to cancel or time out.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write async function getName() that fetches data:application/json,{"name":"Meera"}, checks ok, and returns the name. Log the result.
Write a fetchWithTimeout(url, ms) helper that rejects with a TimeoutError when the request takes longer than ms.
Explain it without notes
Why do you have to check response.ok? When does a fetch promise reject?
Why are there two awaits in a typical fetch call?
How do you send JSON with fetch, and what goes wrong if you skip JSON.stringify?
How do you add a timeout and cancellation to fetch, and how do you tell them apart?
Preview
Console
Nothing logged yet.Expected console output
saved { id: 7, name: 'Asha' }
server said no: HTTP 422: name is required
network problem: Failed to fetch