JavaScript Academy · Lesson

Streaming fetch Responses

Process large responses as they arrive.

Streaming fetch Responses is a free JavaScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Responses Are Streams

A fetch Response exposes its body as a ReadableStream via response.body. Instead of awaiting the full payload, you can process bytes as they arrive.

const res = await fetch("/big-file");
const stream = res.body; // ReadableStream of Uint8Array

Reading the Body Stream

response.body yields Uint8Array chunks. Get a reader and loop just like any readable stream.

const reader = res.body.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("received", value.length, "bytes");
}

Tracking Download Progress

Combine the Content-Length header with received bytes to show a progress bar.

const total = +res.headers.get("Content-Length");
let loaded = 0;
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  loaded += value.length;
  console.log(Math.round((loaded / total) * 100) + "%");
}

Decoding Bytes to Text

Use TextDecoder to turn byte chunks into strings. Pass { stream: true } so multi-byte characters split across chunks decode correctly.

const decoder = new TextDecoder();
let text = "";
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  text += decoder.decode(value, { stream: true });
}

Using TextDecoderStream

Even simpler: pipe the byte stream through a TextDecoderStream to get a stream of strings directly.

const textStream = res.body.pipeThrough(new TextDecoderStream());
for await (const chunk of textStream) {
  console.log(chunk);
}

Parsing NDJSON

Newline-delimited JSON streams one object per line. Buffer text and emit complete lines as they form.

let buffer = "";
for await (const chunk of textStream) {
  buffer += chunk;
  let nl;
  while ((nl = buffer.indexOf("\n")) >= 0) {
    const line = buffer.slice(0, nl);
    buffer = buffer.slice(nl + 1);
    if (line) console.log(JSON.parse(line));
  }
}

Streaming LLM Tokens

This pattern powers streaming AI chat: each chunk is a token or event, rendered the instant it arrives for a live typing effect.

Aborting a Fetch Stream

Pass an AbortSignal to fetch and call controller.abort() to stop a long stream cleanly.

const controller = new AbortController();
fetch("/stream", { signal: controller.signal });
// later:
controller.abort();

Handling Stream Errors

Network failures mid-stream reject the read() promise. Wrap the loop in try/catch to handle interruptions.

try {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
  }
} catch (err) {
  console.log("stream interrupted", err);
}

When Not to Stream

For small responses, res.json() or res.text() is simpler. Reach for streaming when payloads are large, progressive, or unbounded.

Response Body Is Single-Use

You can read response.body only once. Call res.clone() before reading if you need it twice (e.g. for caching).

const copy = res.clone();
await res.body.getReader().read();
// copy still readable

Quick Check

Test fetch streaming.

Recap: Streaming Fetch

You read response.body chunk by chunk, tracked progress, decoded bytes with TextDecoder/TextDecoderStream, parsed NDJSON, aborted with AbortController, and handled errors. Next: transform streams.

Frequently asked questions

Is the “Streaming fetch Responses” lesson free?

Yes — the full text of “Streaming fetch Responses” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Streaming fetch Responses”?

Process large responses as they arrive. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Streaming fetch Responses” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy