Lesbare Streams
Verarbeiten Sie Daten in einzelnen Blöcken.
Lesbare Streams ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Was sind Streams?
Die Streams API verarbeitet Daten schrittweise, sobald Datenblöcke eintreffen, statt alles in den Speicher zu laden. Dadurch lassen sich große Downloads, Videos und Live-Feeds effizient verarbeiten.
Der ReadableStream
Ein ReadableStream ist eine Quelle, aus der Sie Datenblock für Datenblock lesen. Browser stellen solche Streams bei fetch-Antworten, Datei-Blobs und weiteren Quellen bereit.
Einen Stream erstellen
Erstellen Sie einen Stream mit einem zugrunde liegenden Quellobjekt, dessen start(controller) Datenblöcke in die Warteschlange einreiht und den Abschluss signalisiert.
const stream = new ReadableStream({
start(controller) {
controller.enqueue("chunk 1");
controller.enqueue("chunk 2");
controller.close();
}
});Einen Reader abrufen
getReader() sperrt den Stream und gibt einen Reader zurück. Solange der Stream gesperrt ist, kann kein anderer Verbraucher daraus lesen.
const reader = stream.getReader();Datenblöcke lesen
reader.read() gibt ein Promise zurück, das zu { value, done } aufgelöst wird. done wird zu true, wenn der Stream erschöpft ist.
const { value, done } = await reader.read();
console.log(value, done);Die Leseschleife
Rufen Sie read() in einer Schleife auf, bis done den Wert true hat, um den gesamten Stream zu verarbeiten.
const reader = stream.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("got", value);
}Die Sperre freigeben
Rufen Sie reader.releaseLock() auf, um die Sperre des Streams aufzuheben, damit ein anderer Reader ihn übernehmen kann.
reader.releaseLock();Die pull-Methode
Eine zugrunde liegende Quelle kann pull(controller) definieren. Diese Methode wird aufgerufen, wenn der Verbraucher weitere Daten anfordert, und ermöglicht so eine verzögerte Erzeugung nach Bedarf.
let i = 0;
new ReadableStream({
pull(controller) {
controller.enqueue(i++);
if (i > 5) controller.close();
}
});Asynchrone Iteration
In modernen Umgebungen ist ein ReadableStream asynchron iterierbar. Dadurch können Sie statt einer manuellen Schleife for await...of verwenden.
for await (const chunk of stream) {
console.log(chunk);
}Einen Stream abbrechen
reader.cancel(reason) beendet den Stream vorzeitig und gibt Ressourcen frei – wichtig, um große Downloads abzubrechen.
await reader.cancel("user navigated away");Tee: Einen Stream aufteilen
tee() gibt zwei Streams zurück, die jeweils eine Kopie jedes Datenblocks erhalten – nützlich, wenn Daten zweimal gelesen werden sollen, zum Beispiel für Caching und Anzeige.
const [a, b] = stream.tee();
// read a and b independentlyKurztest
Testen Sie lesbare Streams.
Zusammenfassung: Lesbare Streams
Sie haben einen ReadableStream erstellt, einen Reader abgerufen, Datenblöcke mit read() in einer Schleife verarbeitet, die Sperre freigegeben, mit pull verzögert Daten erzeugt, mit for await iteriert und den Stream mit tee() aufgeteilt. Als Nächstes: gestreamte fetch-Antworten.
Häufig gestellte Fragen
Ist die Lektion „Lesbare Streams“ kostenlos?
Ja — der vollständige Text von „Lesbare Streams“ 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 „Lesbare Streams“?
Verarbeiten Sie Daten in einzelnen Blöcken. 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 1 von 4.
Wie lange dauert die Lektion „Lesbare Streams“?
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.