TheReadableStream.from() static method returns aReadableStream from a provided iterable or async iterable object.

The method can be used to wrap iterable and async iterable objects as readable streams, including arrays, sets, arrays of promises, async generators,ReadableStreams, Node.jsreadable streams, and so on.

Syntax

ReadableStream.from(anyIterable)

Parameters

anyIterable

Aniterable orasync iterable object.

Return value

AReadableStream.

Exceptions

TypeError

Thrown if the passed parameter is not an iterable or async iterable (does not define the[Symbol.iterator]() or[Symbol.asyncIterator]() method).Also thrown if, during iteration, the result of the next step is not an object or is a promise that does not resolve to an object.

Examples

Convert an async iterator to a ReadableStream

This live example demonstrates how you can convert an async iterable to aReadableStream, and then how this stream might be consumed.

HTML

The HTML is consists of single<pre> element, which is used for logging.

<pre></pre>

JavaScript

The example code creates alog() function to write to the log HTML element.

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

It then checks if the static method is supported, and if not, logs the result.

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

The async iterable is an anonymous generator function that yields the values of 1, 2 and 3 when it is called three times.This is passed toReadableStream.from() to create theReadableStream.

// Define an asynchronous iteratorconst asyncIterator = (async function* () {  yield 1;  yield 2;  yield 3;})();// Create ReadableStream from iteratorconst myReadableStream = ReadableStream.from(asyncIterator);

Using readable streams demonstrates several ways to consume a stream.The code below uses afor ...await loop, as this method is the simplest.Each iteration of the loop logs the current chunk from the stream.

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

Result

The output of consuming the stream is shown below (ifReadableStream.from() is supported).

Convert an Array to a ReadableStream

This example demonstrates how you can convert anArray to aReadableStream.

<pre></pre>

const logElement = document.getElementById("log");function log(text) {  logElement.innerText += `${text}\n`;}if (!ReadableStream.from) {  log("ReadableStream.from() is not supported");}

JavaScript

The iterable is just an array of strings that is passed toReadableStream.from() to create theReadableStream.

// An Array of vegetable namesconst vegetables = ["Carrot", "Broccoli", "Tomato", "Spinach"];// Create ReadableStream from the Arrayconst myReadableStream = ReadableStream.from(vegetables);

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

We use the same approach as in the previous example log and to consume the stream, so that is not shown here.

Result

The output is shown below.

Specifications

Browser compatibility

See also

• ReadableStream
• Using readable streams