The Life of a Fetch

• Request — built, credentialed by the browser, possibly answered from cache without leaving the machine.
• Headers — the promise resolves here. You know the status; you do not yet have the data.
• Body — a stream, read once, parsed on the main thread.
• Success or error — decided by response.ok and by whether the parse succeeded, which are two independent questions.
• Render — state, reconciliation, DOM, style, layout, paint. The cheapest part of the sentence to write and often the most expensive to run.
• Abandoned — a fifth outcome that is neither success nor error, and must never be reported as one.

1// The version that ships first
2const res = await fetch(url)
3const data = await res.json()   // 500 -> parse error; 401 -> parse error
4setOrders(data)                 // may run after unmount, or out of order
5 
6// What the platform actually asks of you
7type Result<T> =
8  | { kind: 'ok'; data: T }
9  | { kind: 'http'; status: number; body: string }
10  | { kind: 'network' }
11  | { kind: 'parse'; body: string }
12  | { kind: 'aborted' }
13 
14async function request<T>(url: string, signal?: AbortSignal): Promise<Result<T>> {
15  // No default deadline exists. Choosing none is still choosing.
16  const deadline = AbortSignal.timeout(REQUEST_DEADLINE)
17  const combined = signal ? AbortSignal.any([signal, deadline]) : deadline
18 
19  let res: Response
20  try {
21    res = await fetch(url, { signal: combined })
22  } catch (e) {
23    // Abort is not a failure. Anything else here is below HTTP:
24    // DNS, connection, TLS, or a cross-origin response we may not read.
25    if (e instanceof DOMException && e.name === 'AbortError') return { kind: 'aborted' }
26    return { kind: 'network' }
27  }
28 
29  // The body can be read exactly once, so read it once, here.
30  const body = await res.text()
31  if (!res.ok) return { kind: 'http', status: res.status, body }
32 
33  try {
34    return { kind: 'ok', data: JSON.parse(body) as T }
35  } catch {
36    return { kind: 'parse', body }   // 200, and still not what the contract promised
37  }
38}

The five-case result is the point. Each one deserves a different message, a different retry decision and a different log line — and collapsing them into catch (e) { setError(true) } is what produces an application where every problem says "Something went wrong".