Readable Stream
Consumi i dati un blocco alla volta.
Readable Stream è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Che cosa sono gli stream?
La Streams API elabora i dati progressivamente, man mano che arrivano i blocchi, invece di caricarli tutti in memoria. Questo consente di gestire in modo efficiente download molto grandi, video e flussi in tempo reale.
ReadableStream
Un ReadableStream è una sorgente da cui si leggono i dati un blocco alla volta. I browser li espongono nelle risposte di fetch, nei blob di file e in altri contesti.
Creare uno stream
Lo costruisca con un oggetto sorgente sottostante, il cui start(controller) accoda i blocchi e segnala il completamento.
const stream = new ReadableStream({
start(controller) {
controller.enqueue("chunk 1");
controller.enqueue("chunk 2");
controller.close();
}
});Ottenere un reader
getReader() blocca lo stream e restituisce un reader. Finché è bloccato, nessun altro consumer può leggerlo.
const reader = stream.getReader();Leggere i blocchi
reader.read() restituisce una promise che si risolve in { value, done }. done diventa true quando lo stream è esaurito.
const { value, done } = await reader.read();
console.log(value, done);Il ciclo di lettura
Esegua un ciclo su read() finché done non è true, per consumare l'intero stream.
const reader = stream.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("got", value);
}Rilasciare il blocco
Chiami reader.releaseLock() per sbloccare lo stream, così un altro reader può subentrare.
reader.releaseLock();Il metodo pull
Una sorgente sottostante può definire pull(controller), chiamato quando il consumer richiede altri dati — consentendo una generazione differita e su richiesta.
let i = 0;
new ReadableStream({
pull(controller) {
controller.enqueue(i++);
if (i > 5) controller.close();
}
});Iterazione asincrona
Negli ambienti moderni, un ReadableStream supporta l'iterazione asincrona, permettendo di usare for await...of invece di un ciclo manuale.
for await (const chunk of stream) {
console.log(chunk);
}Annullare uno stream
reader.cancel(reason) arresta lo stream in anticipo e rilascia le risorse — un'operazione importante per interrompere download di grandi dimensioni.
await reader.cancel("user navigated away");Tee: dividere uno stream
tee() restituisce due stream che ricevono ciascuno una copia di ogni blocco — utile per leggere i dati due volte, ad esempio per la cache e la visualizzazione.
const [a, b] = stream.tee();
// read a and b independentlyControllo rapido
Verifichi gli stream leggibili.
Riepilogo: stream leggibili
Ha creato un ReadableStream, ottenuto un reader, consumato i blocchi con read() in un ciclo, rilasciato il blocco, utilizzato pull per i dati differiti, iterato con for await e diviso lo stream con tee(). Prossimo argomento: trasmettere le risposte di fetch.
Domande Frequenti
La lezione «Readable Stream» è gratuita?
Sì — il testo completo di «Readable Stream» è 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 «Readable Stream»?
Consumi i dati un blocco alla volta. 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 1 di 4.
Quanto tempo richiede la lezione «Readable Stream»?
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.