ReadableStream: from() statische Methode

anyIterable

Ein iterables oder asynchrones iterables Objekt.

Ein ReadableStream.

TypeError

Wird ausgelöst, wenn der übergebene Parameter kein Iterable oder asynchrones Iterable ist (definiert nicht die Methode [Symbol.iterator]() oder [Symbol.asyncIterator]()). Wird auch ausgelöst, wenn während der Iteration das Ergebnis des nächsten Schrittes kein Objekt ist oder ein Promise, das sich nicht zu einem Objekt auflöst.

Dieses Live-Beispiel zeigt, wie Sie ein asynchrones Iterable in einen ReadableStream umwandeln können und dann, wie dieser Stream konsumiert werden könnte.

HTML

Das HTML besteht aus einem einzigen <pre>-Element, das für das Logging verwendet wird.

<pre id="log"></pre>

JavaScript

Der Beispielcode erstellt eine log()-Funktion, um zum loggende HTML-Element zu schreiben.

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

Es wird dann überprüft, ob die statische Methode unterstützt wird, und falls nicht, das Ergebnis protokolliert.

if (!ReadableStream.from) {
  log("ReadableStream.from() is not supported");
}

Das asynchrone Iterable ist eine anonyme Generatorfunktion, die die Werte 1, 2 und 3 liefert, wenn sie dreimal aufgerufen wird. Dies wird an ReadableStream.from() übergeben, um den ReadableStream zu erstellen.

// Define an asynchronous iterator
const asyncIterator = (async function* () {
  yield 1;
  yield 2;
  yield 3;
})();

// Create ReadableStream from iterator
const myReadableStream = ReadableStream.from(asyncIterator);

Verwendung von lesbaren Streams demonstriert mehrere Möglichkeiten, einen Stream zu konsumieren. Der folgende Code verwendet eine for ...await-Schleife, da diese Methode die einfachste ist. Jede Iteration der Schleife protokolliert den aktuellen Chunk aus dem Stream.

consumeStream(myReadableStream);

// Iterate a ReadableStream asynchronously
async function consumeStream(readableStream) {
  for await (const chunk of myReadableStream) {
    // Do something with each chunk
    // Here we just log the values
    log(`chunk: ${chunk}`);
  }
}

Ergebnis

Die Ausgabe des Verbrauchs des Streams wird unten angezeigt (wenn ReadableStream.from() unterstützt wird).

Dieses Beispiel zeigt, wie Sie ein Array in einen ReadableStream umwandeln können.

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

if (!ReadableStream.from) {
  log("ReadableStream.from() is not supported");
}

JavaScript

Das Iterable ist einfach ein Array von Zeichenfolgen, das an ReadableStream.from() übergeben wird, um den ReadableStream zu erstellen.

// An Array of vegetable names
const vegetables = ["Carrot", "Broccoli", "Tomato", "Spinach"];

// Create ReadableStream from the Array
const myReadableStream = ReadableStream.from(vegetables);

consumeStream(myReadableStream);

// Iterate a ReadableStream asynchronously
async function consumeStream(readableStream) {
  for await (const chunk of myReadableStream) {
    // Do something with each chunk
    // Here we just log the values
    log(`chunk: ${chunk}`);
  }
}

Wir verwenden denselben Ansatz wie im vorherigen Beispiel, um zu protokollieren und den Stream zu konsumieren, sodass dies hier nicht gezeigt wird.

Ergebnis

Die Ausgabe wird unten angezeigt.

• ReadableStream
• Verwendung von lesbaren Streams