JavaScript Academy · Lektion

Streaming af fetch-svar

Behandl store svar, efterhånden som de ankommer.

Lektion 2 af 413 trin

Streaming af fetch-svar er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Svar er datastrømme

Et fetch-Response gør sin body tilgængelig som en ReadableStream via response.body. I stedet for at vente på hele dataindholdet kan du behandle byte, efterhånden som de ankommer.

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

Læs svarstrømmen

response.body leverer Uint8Array-blokke. Hent en læser, og gentag i en løkke ligesom for enhver anden læsbar datastrøm.

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

Følg downloadets fremdrift

Kombinér headeren Content-Length med de modtagne byte for at vise en fremdriftsbjælke.

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

Afkod byte til tekst

Brug TextDecoder til at omdanne byteblokke til tekststrenge. Overfør { stream: true }, så multibyte-tegn, der er delt mellem blokke, afkodes korrekt.

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

Brug TextDecoderStream

Det er endnu enklere at føre bytestrømmen gennem en TextDecoderStream for at få en datastrøm med tekststrenge direkte.

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

Pars NDJSON

Linjeafgrænset JSON sender ét objekt pr. linje. Gem tekst i en buffer, og udsend komplette linjer, efterhånden 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));
  }
}

Stream LLM-tokens

Dette mønster driver streaming af AI-chat: Hver blok er et token eller en hændelse, som gengives, så snart den ankommer, for at skabe en levende skriveeffekt.

Afbryd en fetch-datastrøm

Overfør et AbortSignal til fetch, og kald controller.abort() for at stoppe en lang datastrøm på en ordentlig måde.

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

Håndtér fejl i datastrømme

Netværksfejl midt i datastrømmen afviser løftet fra read(). Pak løkken ind i try/catch for at håndtere afbrydelser.

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

Hvornår du ikke skal bruge streaming

Ved små svar er res.json() eller res.text() enklere. Vælg streaming, når dataindholdet er stort, kommer løbende eller ikke har en fast slutning.

Svarindholdet kan kun bruges én gang

Du kan kun læse response.body én gang. Kald res.clone() før læsningen, hvis du har brug for det to gange, f.eks. til caching.

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

Hurtigt tjek

Afprøv streaming af fetch-svar.

Besvar den i den interaktive lektion

Opsummering: Streaming af fetch-svar

Du læste response.body blok for blok, fulgte fremdriften, afkodede byte med TextDecoder/TextDecoderStream, parsede NDJSON, afbrød med AbortController og håndterede fejl. Næste emne er transformationsstrømme.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Streaming af fetch-svar” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Streaming af fetch-svar”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Streaming af fetch-svar”?

Behandl store svar, efterhånden som de ankommer. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Streaming af fetch-svar”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy