JavaScript Academy · Lektion

Streaming-Fetch-Antworten

Verarbeiten Sie große Antworten, während sie eintreffen.

Streaming-Fetch-Antworten ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Responses sind Streams

Eine fetch-Response stellt ihren Body über response.body als ReadableStream bereit. Statt auf die vollständige Nutzlast zu warten, können Sie die Bytes verarbeiten, sobald sie eintreffen.

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

Den Body-Stream lesen

response.body liefert Uint8Array-Datenblöcke. Rufen Sie einen Reader ab und durchlaufen Sie den Stream wie jeden anderen lesbaren Stream.

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

Downloadfortschritt verfolgen

Kombinieren Sie den Content-Length-Header mit der Anzahl der empfangenen Bytes, um einen Fortschrittsbalken anzuzeigen.

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) + "%");
}

Bytes in Text decodieren

Verwenden Sie TextDecoder, um Byte-Datenblöcke in Zeichenfolgen umzuwandeln. Übergeben Sie { stream: true }, damit über mehrere Datenblöcke verteilte Mehrbytezeichen korrekt decodiert werden.

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

TextDecoderStream verwenden

Noch einfacher geht es, wenn Sie den Byte-Stream durch einen TextDecoderStream leiten, um direkt einen Stream aus Zeichenfolgen zu erhalten.

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

NDJSON analysieren

Bei Newline-delimited JSON wird pro Zeile ein Objekt gestreamt. Puffern Sie den Text und geben Sie vollständige Zeilen aus, sobald sie entstehen.

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));
  }
}

LLM-Tokens streamen

Dieses Muster bildet die Grundlage für gestreamte KI-Chats: Jeder Datenblock ist ein Token oder Ereignis und wird sofort bei seinem Eintreffen dargestellt, wodurch ein Live-Schreibeffekt entsteht.

Einen Fetch-Stream abbrechen

Übergeben Sie fetch ein AbortSignal und rufen Sie controller.abort() auf, um einen langen Stream sauber zu beenden.

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

Stream-Fehler behandeln

Netzwerkfehler während des Streams führen dazu, dass das Promise von read() abgelehnt wird. Umschließen Sie die Schleife mit try/catch, um Unterbrechungen zu behandeln.

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

Wann Sie nicht streamen sollten

Für kleine Antworten sind res.json() oder res.text() einfacher. Verwenden Sie Streaming, wenn Nutzlasten groß, schrittweise verfügbar oder unbegrenzt sind.

Der Response-Body kann nur einmal gelesen werden

Sie können response.body nur einmal lesen. Rufen Sie vor dem Lesen res.clone() auf, wenn Sie den Body zweimal benötigen, zum Beispiel für das Caching.

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

Kurztest

Testen Sie Fetch-Streaming.

Zusammenfassung: Fetch-Streaming

Sie haben response.body Datenblock für Datenblock gelesen, den Fortschritt verfolgt, Bytes mit TextDecoder/TextDecoderStream decodiert, NDJSON analysiert, mit AbortController abgebrochen und Fehler behandelt. Als Nächstes: Transform-Streams.

Häufig gestellte Fragen

Ist die Lektion „Streaming-Fetch-Antworten“ kostenlos?

Ja — der vollständige Text von „Streaming-Fetch-Antworten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Streaming-Fetch-Antworten“?

Verarbeiten Sie große Antworten, während sie eintreffen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Streaming-Fetch-Antworten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy