ReadableStream

Das ReadableStream Interface der Streams API repräsentiert einen lesbaren Datenstrom von Bytes.

Konstruktor

ReadableStream()

Erstellt eine Instanz des ReadableStream Interfaces.

Eigenschaften

ReadableStream.locked Schreibgeschützt

Gibt zurück, ob der Stream bereits für einen Reader gesperrt ist.

Methoden

ReadableStream.cancel()

Bricht den Stream ab und signalisiert dadurch, dass der Konsument sein Interesse am Stream verloren hat. Das angegebene reason Argument wird an die darunterliegende Quelle weitergegeben, welche dieses benutzen kann. 

ReadableStream.getReader()

Erstellt einen Reader, dessen Typ durch die mode Option angegeben wird, und sperrt den Stream für den neuen Reader. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.

ReadableStream.getIterator()

Erstellt einen asyncronen ReadableStream-Iterator und sperrt den Stream für ihn, sodass der Iterator der einzige Leser ist. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.

ReadableStream.pipeThrough()

Bietet die Möglichkeit den Stream mit transformierenden Streams zu verketten.

ReadableStream.pipeTo()

Pipet den aktuellen ReadableStream zu einem gegebenen WritableStream und gibt ein Promise zurück welches erfüllt ist, wenn der Piping-Prozess erfolgreich beendet wurde oder verwirft es, wenn irgendein anderer Fehler auftritt.

ReadableStream.tee()

Verzweigt den ReadableStream in zwei neue Stream-Instanzen, auf denen parallel gelesen werden kann.

ReadableStream[@@asyncIterator]()

Alias der getIterator-Methode.

Benutzung

Im folgenden Beispiel wird eine Response erzeugt, die HTML-Fragmente einer anderen Ressource fetched und an den Browser streamt.

Dadurch wird die Benutzung von ReadableStream in Kombination mit Uint8Array gezeigt.

fetch("https://www.example.org/").then((response) => {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // Die folgende Funktion behandelt jeden Daten-Chunk
      function push() {
        // "done" ist ein Boolean und "value" ein "Uint8Array"
        return reader.read().then(({ done, value }) => {
          // Gibt es weitere Daten zu laden?
          if (done) {
            // Teile dem Browser mit, dass wir fertig mit dem Senden von Daten sind
            controller.close();
            return;
          }

          // Bekomme die Daten und sende diese an den Browser durch den Controller weiter
          controller.enqueue(value);
        }).then(push);
      };
      
      push();
    }
  });

  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});

Spezifikationen

Browserkompatibilität