JS Quiz: Hard: Fetch error handling misconception

programming web dev
1

Which branch runs when the server returns 404?

fetch('/missing')
  .then((r) => {
    if (!r.ok) return 'bad';
    return 'good';
  })
  .catch(() => 'caught')
  .then((v) => console.log(v));
  • good
  • bad
  • caught
  • nothing, promise rejects silently
0 voters
2

I’d pick “bad” because 404 does not reject fetch, so the first then returns bad and that value flows through the chain.

404 is the annoying case where fetch resolves fine, so your first . then runs and returns 'bad', and that’s what gets logged.

fetch("/missing").then((r) => {
  if (!r.ok) return "bad";
  return "good";
}).catch(() => "caught").then((v) => console.log(v));

. catch only fires for network-y failures (DNS, CORS blocking, offline, aborted request), not HTTP error status.

Naming tip: I usually call it res not r because I will absolutely forget what r. ok was an hour later.

3

JS Quiz answer: Option 2 (B).

Correct choice: bad

Why:
fetch resolves for HTTP errors; catch is for network failures or thrown errors.

Go deeper: