Await StationISSUE #9 of 26

fetch · request · response · headers

PromissaVSRace Condition Rex

Promissa saysA fetch takes an options object; the Response exposes status, headers, and body readers.

The second argument to fetch configures the request: method, headers, body, credentials, mode. The Response gives status, ok, headers (a Headers object), and body readers (json, text, blob, arrayBuffer) — each consumable once.

Power-ups you unlock

fetch(url, { method, headers, body, … })
Response: status, ok, headers
Body readers: json/text/blob/arrayBuffer
The body can be read only once

Race Condition Rex attacks — common mistakes

Reading the body twice (already consumed)
Forgetting Content-Type header on JSON posts
Ignoring credentials for cookie-auth requests

Boss battleInspect a Response’s status and a header, then read its body once.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>const res = await fetch(url, {
  method: 'GET',
  headers: { 'Accept': 'application/json' }
});
res.status; res.ok; res.headers.get('content-type');
const data = await res.json(); // body consumed once</pre></body></html>

▶ Open the interactive comic issue

‹ Fetch · The Modern Http Client Fetch · POST · PUT · DELETE ›