JavaScript Academy · Lezione

Risposte streaming di fetch

Elabori le risposte di grandi dimensioni mentre arrivano.

Risposte streaming di fetch è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Le risposte sono stream

Una Response di fetch espone il proprio corpo come ReadableStream tramite response.body. Invece di attendere l'intero payload, può elaborare i byte man mano che arrivano.

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

Leggere lo stream del corpo

response.body fornisce blocchi Uint8Array. Ottenga un reader ed esegua un ciclo, proprio come per qualsiasi stream leggibile.

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

Monitorare l'avanzamento del download

Combini l'header Content-Length con i byte ricevuti per mostrare una barra di avanzamento.

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

Decodificare i byte in testo

Utilizzi TextDecoder per trasformare i blocchi di byte in stringhe. Passi { stream: true } affinché i caratteri multibyte suddivisi tra più blocchi vengano decodificati correttamente.

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

Utilizzare TextDecoderStream

È ancora più semplice: faccia passare lo stream di byte attraverso un TextDecoderStream per ottenere direttamente uno stream di stringhe.

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

Analizzare NDJSON

NDJSON delimitato da newline trasmette un oggetto per riga. Memorizzi temporaneamente il testo ed emetta le righe complete man mano che si formano.

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

Trasmettere i token di un LLM

Questo schema alimenta le chat AI in streaming: ogni blocco è un token o un evento, visualizzato non appena arriva per ottenere un effetto di digitazione in tempo reale.

Annullare uno stream di fetch

Passi un AbortSignal a fetch e chiami controller.abort() per arrestare in modo ordinato uno stream lungo.

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

Gestire gli errori degli stream

Gli errori di rete durante lo stream fanno sì che la promise di read() venga rifiutata. Racchiuda il ciclo in try/catch per gestire le interruzioni.

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

Quando non usare lo streaming

Per le risposte piccole, res.json() o res.text() è più semplice. Scelga lo streaming quando i payload sono grandi, progressivi o senza dimensione predefinita.

Il corpo della risposta si può usare una sola volta

Può leggere response.body una sola volta. Chiami res.clone() prima della lettura se deve utilizzarlo due volte, ad esempio per la memorizzazione nella cache.

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

Controllo rapido

Verifichi lo streaming con fetch.

Riepilogo: streaming con fetch

Ha letto response.body un blocco alla volta, monitorato l'avanzamento, decodificato i byte con TextDecoder/TextDecoderStream, analizzato NDJSON, annullato lo stream con AbortController e gestito gli errori. Prossimo argomento: gli stream di trasformazione.

Domande Frequenti

La lezione «Risposte streaming di fetch» è gratuita?

Sì — il testo completo di «Risposte streaming di fetch» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Risposte streaming di fetch»?

Elabori le risposte di grandi dimensioni mentre arrivano. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Risposte streaming di fetch»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy