The ReadableStream.from()
static method returns a ReadableStream
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.js readable
streams, and so on.
ReadableStream.from(anyIterable)
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.
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
.
const asyncIterator = (async function* () {
yield 1;
yield 2;
yield 3;
})();
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);
async function consumeStream(readableStream) {
for await (const chunk of myReadableStream) {
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
.
JavaScript
The iterable is just an array of strings that is passed to ReadableStream.from()
to create the ReadableStream
.
const vegetables = ["Carrot", "Broccoli", "Tomato", "Spinach"];
const myReadableStream = ReadableStream.from(vegetables);
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.