js/fetch-check-ok

Why

fetch resolves for every HTTP answer, including 401, 404 and 500. Code that goes straight to res.json() then parses an error page, throws a confusing SyntaxError, or renders the error body as if it were data, and the user sees an empty list instead of an error message.

Fix

Check res.ok (or res.status) and throw an Error with the status when it is false; show an error state where the call is used. A shared helper (getJson(url)) that does this once is the simplest way to keep every call right; passing the response to such a helper counts as a check.

Examples

// bad
const users = await (await fetch('/api/users')).json()
// good
const res = await fetch('/api/users', { signal })
if (!res.ok) throw new Error(`GET /api/users failed: ${res.status}`)
const users = await res.json()

Sources

• MDN, Window.fetch() (the promise rejects only on network errors)
• MDN, Response.ok

Read it in the terminal

npx github:dawidolko/frontend-skills explain js/fetch-check-ok