ReadableStream: from() statische Methode

Syntax

ReadableStream.from(anyIterable)

Parameter

anyIterable

Ein iterierbares oder asynchrones iterierbares Objekt.

Rückgabewert

Ein ReadableStream.

Ausnahmen

TypeError

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

Beispiele

Ein asynchronen Iterator in einen ReadableStream konvertieren

Dieses interaktive Beispiel demonstriert, wie Sie ein asynchron iterierbares Objekt in einen ReadableStream konvertieren und dann, wie dieser Stream konsumiert werden könnte.

HTML

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

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

JavaScript

Der Beispielcode erstellt eine log()-Funktion, um in das log 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 geloggt.

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

Das asynchron iterierbare Objekt 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 zeigt verschiedene Möglichkeiten, einen Stream zu konsumieren. Der unten stehende Code verwendet eine for ...await Schleife, da diese Methode die einfachste ist. Jede Iteration der Schleife protokolliert das aktuelle Stück aus dem Stream.

consumeStream(myReadableStream);

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

Ergebnis

Das Ergebnis des Konsums des Streams wird unten angezeigt (falls ReadableStream.from() unterstützt wird).

Ein Array in einen ReadableStream konvertieren

Dieses Beispiel zeigt, wie man ein Array in einen ReadableStream konvertieren kann.

<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 iterierbare Objekt 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 readableStream) {
    // Do something with each chunk
    // Here we just log the values
    log(`chunk: ${chunk}`);
  }
}

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

Ergebnis

Das Ergebnis wird unten angezeigt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• ReadableStream
• Verwendung von lesbaren Streams