JavaScript Academy · Lesson

Streaming fetch Responses

Process large responses as they arrive.

Lesson 2 of 413 steps

Streaming fetch Responses is a free JavaScript Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

Is the “Streaming fetch Responses” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Streaming fetch Responses”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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