js/fetch-check-ok

Dlaczego

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.

Poprawka

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.

Przykłady

// 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()

Źródła

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

Przeczytaj w terminalu

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