ReadableStream

ReadableStream()

Erstellt und gibt ein lesbares Stream-Objekt aus den angegebenen Handlern zurück.

ReadableStream.locked Nur lesbar

Gibt einen boolean zurück, der anzeigt, ob der lesbare Strom an einen Leser gebunden ist oder nicht.

ReadableStream.from() Experimentell

Gibt ReadableStream von einem bereitgestellten iterierbaren oder asynchronen iterierbaren Objekt zurück, wie z.B. ein Array, ein Set, ein asynchroner Generator und so weiter.

ReadableStream.cancel()

Gibt ein Promise zurück, das aufgelöst wird, wenn der Stream abgebrochen wird. Das Aufrufen dieser Methode signalisiert ein Interesse-Verlust des Verbrauchers am Stream. Das übergebene reason-Argument wird der zugrunde liegenden Quelle gegeben, die es möglicherweise verwendet oder nicht.

ReadableStream.getReader()

Erstellt einen Leser und sperrt den Stream für ihn. Während der Stream gesperrt ist, kann kein anderer Leser erworben werden, bis dieser freigegeben wird.

ReadableStream.pipeThrough()

Bietet eine kaskadierbare Möglichkeit, den aktuellen Stream durch einen Transformationsstream oder ein beliebiges anderes schreibbares/lesbares Paar zu leiten.

ReadableStream.pipeTo()

Leitet den aktuellen ReadableStream zu einem gegebenen WritableStream und gibt ein Promise zurück, das erfüllt wird, wenn der Piping-Prozess erfolgreich abgeschlossen ist, oder abgelehnt wird, wenn Fehler aufgetreten sind.

ReadableStream.tee()

Die tee-Methode [verzweigt] (https://streams.spec.whatwg.org/#tee-a-readable-stream) diesen lesbaren Stream und gibt ein zwei-Elemente-Array zurück, das die beiden resultierenden Zweige als neue ReadableStream-Instanzen enthält. Jeder dieser Streams erhält die gleichen eingehenden Daten.

ReadableStream implementiert das asynchrone iterierbare Protokoll. Dies ermöglicht die asynchrone Iteration über die Chunks in einem Stream mithilfe der for await...of-Syntax:

const stream = new ReadableStream(getSomeSource());

for await (const chunk of stream) {
  // Do something with each 'chunk'
}

Der asynchrone Iterator verbraucht den Stream, bis er keine Daten mehr hat oder anderweitig endet. Die Schleife kann auch frühzeitig aufgrund eines break-, throw- oder return-Befehls beendet werden.

Während der Iteration ist der Stream gesperrt, um zu verhindern, dass andere Verbraucher einen Leser erwerben (Versuche, über einen bereits gesperrten Stream zu iterieren, werfen einen TypeError). Diese Sperre wird freigegeben, wenn die Schleife endet.

Standardmäßig wird der Stream beim Beenden der Schleife ebenfalls abgebrochen, sodass er nicht mehr verwendet werden kann. Um den Stream nach dem Beenden der Schleife weiterhin zu verwenden, geben Sie { preventCancel: true } an die values()-Methode des Streams weiter:

for await (const chunk of stream.values({ preventCancel: true })) {
  // Do something with 'chunk'
  break;
}
// Acquire a reader for the stream and continue reading ...

Im folgenden Beispiel wird eine künstliche Response erstellt, um HTML-Fragmente, die von einer anderen Ressource abgerufen wurden, an den Browser zu streamen.

Es demonstriert die Verwendung eines ReadableStream in Kombination mit einem Uint8Array.

fetch("https://www.example.org")
  .then((response) => response.body)
  .then((rb) => {
    const reader = rb.getReader();

    return new ReadableStream({
      start(controller) {
        // The following function handles each data chunk
        function push() {
          // "done" is a Boolean and value a "Uint8Array"
          reader.read().then(({ done, value }) => {
            // If there is no more data to read
            if (done) {
              console.log("done", done);
              controller.close();
              return;
            }
            // Get the data and send it to the browser via the controller
            controller.enqueue(value);
            // Check chunks by logging to the console
            console.log(done, value);
            push();
          });
        }

        push();
      },
    });
  })
  .then((stream) =>
    // Respond with our stream
    new Response(stream, { headers: { "Content-Type": "text/html" } }).text(),
  )
  .then((result) => {
    // Do things with result
    console.log(result);
  });

Die statische Methode from() kann einen Iterator, wie einen Array oder Map, oder einen (asynchronen) Iterator in einen lesbaren Stream konvertieren:

const myReadableStream = ReadableStream.from(iteratorOrAsyncIterator);

In Browsern, die die from()-Methode nicht unterstützen, können Sie stattdessen Ihren eigenen benutzerdefinierten lesbaren Stream erstellen, um das gleiche Ergebnis zu erzielen:

function iteratorToStream(iterator) {
  return new ReadableStream({
    async pull(controller) {
      const { value, done } = await iterator.next();

      if (value) {
        controller.enqueue(value);
      }
      if (done) {
        controller.close();
      }
    },
  });
}

Dieses Beispiel zeigt, wie Sie die fetch()-Antwort mit einer for await...of-Schleife verarbeiten können, um durch die ankommenden Chunks zu iterieren.

const response = await fetch("https://www.example.org");
let total = 0;

// Iterate response.body (a ReadableStream) asynchronously
for await (const chunk of response.body) {
  // Do something with each chunk
  // Here we just accumulate the size of the response.
  total += chunk.length;
}

// Do something with the total
console.log(total);

• Streams API Konzepte
• Verwendung von lesbaren Streams
• Verwendung von lesbaren Bytestreams
• WHATWG Stream Visualizer, für eine grundlegende Visualisierung von lesbaren, schreibbaren und Transformationsstreams.
• Web-streams-polyfill oder sd-streams - Polyfills