ReadableStream: from() statische Methode - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

ReadableStream: from() statische Methode

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die statische Methode ReadableStream.from() gibt einen ReadableStream von einem bereitgestellten iterierbaren oder asynchronen iterierbaren Objekt zurück.

Diese Methode kann verwendet werden, um iterierbare und asynchron iterierbare Objekte als lesbare Streams zu behandeln, einschließlich Arrays, Sets, Arrays von Promises, asynchronen Generatoren, ReadableStreams, Node.js readable Streams und so weiter.

In diesem Artikel

Syntax

ReadableStream.from(anyIterable)

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.

html

JavaScript

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

js
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.

js
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.

js
// 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.

js
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.

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.

js
// 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.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Streams API
ReadableStream
Konstruktor
1. ReadableStream()
Instanzeigenschaften
1. locked
Statische Methoden
1. from()
Instanzmethoden
Verwandte Seiten für Streams
Anleitungen
1. Streams API Konzepte
2. Verwendung von lesbaren Streams
3. Verwendung von lesbaren Bytestreams
4. Verwenden von beschreibbaren Streams

ReadableStream: from() statische Methode

In diesem Artikel

Syntax

Parameter

Rückgabewert

Ausnahmen

Beispiele

Ein asynchronen Iterator in einen ReadableStream konvertieren

HTML

JavaScript

Ergebnis

Ein Array in einen ReadableStream konvertieren

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN