JavaScript Academy · Lektion

Backpressure und Piping

Steuern Sie den Datenfluss mit pipeTo und pipeThrough.

Backpressure und Piping ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Das Backpressure-Problem

Wenn ein Produzent Daten schneller erzeugt, als ein Konsument sie verarbeiten kann, füllt sich der Speicher. Backpressure ist der Mechanismus, mit dem ein langsamer Konsument einem schnellen Produzenten signalisiert, langsamer zu werden.

WritableStream

Ein WritableStream ist ein Ziel, in das Sie Chunks schreiben. Seine Sink-Methode write(chunk) kann asynchron sein und dadurch signalisieren, wann der nächste Chunk bereit ist.

const sink = new WritableStream({
  write(chunk) {
    console.log("writing", chunk);
  }
});

Einen Writer abrufen

getWriter() sperrt den beschreibbaren Stream und gibt einen Writer mit write(), close() und einem ready-Promise zurück.

const writer = sink.getWriter();
await writer.write("hello");
await writer.close();

Das ready-Signal

Warten Sie mit await auf writer.ready, bevor Sie schreiben. Das Promise wird aufgelöst, sobald der Stream weitere Daten annehmen kann – so funktioniert Backpressure in der Praxis.

await writer.ready;
await writer.write(chunk);

pipeTo

readable.pipeTo(writable) verbindet eine Quelle mit einem Ziel und verwaltet Backpressure automatisch für Sie. Die Methode gibt ein Promise zurück, das aufgelöst wird, wenn das Weiterleiten abgeschlossen ist.

await readableStream.pipeTo(writableStream);
console.log("done piping");

pipeThrough

pipeThrough(transform) fügt zwischen Quelle und Senke eine Transformation ein und gibt den transformierten lesbaren Stream zurück. Verketten Sie mehrere Transformationen, um eine Pipeline zu erstellen.

sourceStream
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(parser)
  .pipeTo(consumer);

Highwater-Marken

Die highWaterMark-Eigenschaft einer Warteschlangenstrategie legt fest, wie viele Chunks sich anstauen dürfen, bevor Backpressure einsetzt. Stimmen Sie diesen Wert ab, um Durchsatz und Speicherverbrauch ins Gleichgewicht zu bringen.

new ReadableStream(source, new CountQueuingStrategy({ highWaterMark: 4 }));

desiredSize

desiredSize eines Controllers teilt dem Produzenten mit, wie viel Platz noch in der Warteschlange ist. Sobald der Wert null oder kleiner ist, dürfen Sie keine weiteren Chunks mehr einreihen.

pull(controller) {
  while (controller.desiredSize > 0) {
    controller.enqueue(nextChunk());
  }
}

Eine Pipeline abbrechen

Übergeben Sie { signal } an pipeTo, um die gesamte Pipeline mit einem AbortController abzubrechen.

const ctrl = new AbortController();
readable.pipeTo(writable, { signal: ctrl.signal });
ctrl.abort();

Optionen für Pipelines

pipeTo akzeptiert preventClose, preventAbort und preventCancel, um zu steuern, wie Fehler und der Abschluss zwischen den Enden weitergegeben werden.

readable.pipeTo(writable, { preventClose: true });

Eine vollständige Pipeline

Setzen wir alles zusammen: Rufen Sie Bytes ab, dekodieren und transformieren Sie sie und schreiben Sie sie in eine Senke – alles mit automatischer Flusskontrolle.

const res = await fetch("/data");
await res.body
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(lineSplitter)
  .pipeTo(uiSink);

Schnelltest

Testen Sie Backpressure.

Zusammenfassung: Backpressure und Pipelines

Sie haben WritableStream und Writer kennengelernt, mit ready auf Backpressure gewartet, Streams mit pipeTo/pipeThrough verbunden, highWaterMark angepasst und desiredSize überwacht sowie Pipelines abgebrochen. Damit ist die Streams API abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „Backpressure und Piping“ kostenlos?

Ja — der vollständige Text von „Backpressure und Piping“ 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 „Backpressure und Piping“?

Steuern Sie den Datenfluss mit pipeTo und pipeThrough. 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 4 von 4.

Wie lange dauert die Lektion „Backpressure und Piping“?

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.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy