Await StationISSUE #11 of 26

fetch · streaming · ReadableStream

PromissaVSRace Condition Rex

Promissa saysfetch bodies are streams — ReadableStream lets you process data as it arrives.

response.body is a ReadableStream. Instead of waiting for the whole payload, read chunks with a reader (response.body.getReader()) — useful for progress bars, large downloads, and streaming AI responses. You decode chunks (TextDecoder) as they come. Most code uses .json(); reach for streams when size or latency matters.

Power-ups you unlock

response.body is a ReadableStream
getReader() reads chunks as they arrive
Great for progress and streamed responses
TextDecoder turns byte chunks into text

Race Condition Rex attacks — common mistakes

Buffering a huge response instead of streaming
Forgetting to handle the final partial chunk
Streaming when a simple .json() would do

Boss battleSketch reading a stream chunk-by-chunk with getReader() and TextDecoder.

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);
const reader = res.body.getReader();
const dec = new TextDecoder();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  process(dec.decode(value)); // each chunk
}</pre></body></html>

▶ Open the interactive comic issue

‹ Fetch · POST · PUT · DELETE Abort Controller · Cancelable Requests ›