ReadableStream: from() static method

anyIterable

An iterable or async iterable object.

A ReadableStream.

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.

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

HTML

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

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

JavaScript

The example code creates a log() 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 to ReadableStream.from() to create the ReadableStream.

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

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

Using readable streams demonstrates several ways to consume a stream. The code below uses a for ...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 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}`);
  }
}

Result

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

This example demonstrates how you can convert an Array to a ReadableStream.

<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

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

// 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}`);
  }
}

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.

• ReadableStream
• Using readable streams