Await StationISSUE #8 of 26

fetch · the modern http client

PromissaVSRace Condition Rex

Promissa saysfetch is the modern promise-based way to make HTTP requests from the browser.

fetch(url) returns a promise for a Response. Call .json() (or .text()) — itself async — to read the body. A gotcha: fetch only rejects on network failure, not on HTTP errors like 404/500, so check response.ok yourself. Pair with async/await for clean request code.

Power-ups you unlock

fetch(url) → promise of a Response
await response.json() reads the body
Does NOT reject on 404/500 — check response.ok
Pairs naturally with async/await

Race Condition Rex attacks — common mistakes

Assuming fetch rejects on HTTP error status
Forgetting .json() is itself async
No error handling for network failures

Boss battleFetch JSON, check response.ok, and display a field. (Cross-origin may be blocked in the sandbox.)

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o">click run after editing</pre>
<script>(async()=>{ try{ const r=await fetch('https://httpbin.org/json'); if(!r.ok) throw new Error(r.status); const j=await r.json(); document.getElementById('o').textContent=JSON.stringify(j).slice(0,120); }catch(e){ document.getElementById('o').textContent='error/CORS: '+e.message; } })();</script></body></html>

▶ Open the interactive comic issue

‹ Error Handling · Try / Catch Around Await Fetch · Request · Response · Headers ›