JavaScript Academy · leksjon

Streaming-svar fra fetch

Behandle store svar etter hvert som de kommer.

Leksjon 2 av 413 trinn

Streaming-svar fra fetch er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Responser er strømmer

En fetch-Response tilbyr innholdet sitt som en ReadableStream via response.body. I stedet for å vente på hele nyttelasten kan byte behandles etter hvert som de kommer inn.

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

Lese body-strømmen

response.body gir Uint8Array-chunks. Hent en leser og bruk en løkke, akkurat som for enhver lesbar strøm.

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

Følge med på nedlastingsfremdriften

Kombiner Content-Length-headeren med antallet mottatte byte for å vise en fremdriftsindikator.

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

Dekode byte til tekst

Bruk TextDecoder til å gjøre byte-chunks om til strenger. Oppgi { stream: true } slik at flerbyte-tegn som er delt mellom chunks, dekodes riktig.

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

Bruke TextDecoderStream

En enda enklere løsning er å sende byte-strømmen gjennom en TextDecoderStream for å få en strøm med strenger direkte.

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

Analysere NDJSON

Linjedelt JSON strømmer ett objekt per linje. Mellomlagre teksten og send ut komplette linjer etter hvert som de dannes.

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

Strømming av LLM-token

Dette mønsteret driver strømmende AI-chat: hver chunk er et token eller en hendelse som gjengis i det øyeblikket den kommer inn, slik at det ser ut som om teksten skrives direkte.

Avbryte en fetch-strøm

Send et AbortSignal til fetch og kall controller.abort() for å stoppe en langvarig strøm på en ryddig måte.

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

Håndtere strømfeil

Nettverksfeil midt i strømmen avviser promise-et fra read(). Legg løkken i try/catch for å håndtere avbrudd.

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

Når strømming ikke bør brukes

For små responser er res.json() eller res.text() enklere. Bruk strømming når nyttelastene er store, trinnvise eller ubegrensede.

Responsens body kan bare brukes én gang

response.body kan bare leses én gang. Kall res.clone() før lesingen hvis du trenger å lese den to ganger, for eksempel for hurtigbufring.

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

Kort kontroll

Test fetch-strømming.

Besvar den i den interaktive leksjonen

Oppsummering: Strømming med fetch

response.body ble lest chunk for chunk, fremdriften ble fulgt, byte ble dekodet med TextDecoder/TextDecoderStream, NDJSON ble analysert, strømmingen ble avbrutt med AbortController, og feil ble håndtert. Neste tema er transformasjonsstrømmer.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Streaming-svar fra fetch» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Streaming-svar fra fetch», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Streaming-svar fra fetch»?

Behandle store svar etter hvert som de kommer. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Streaming-svar fra fetch»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy