ReadableStream：from() 静态方法

注意：此功能在Web Workers中可用。

实验性：这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表。

ReadableStream.from()静态方法从提供的可迭代或异步可迭代对象返回一个ReadableStream。

该方法可用于将可迭代和异步可迭代对象包装为可读流，包括数组、集合、Promise 数组、异步生成器、ReadableStreams、Node.js readable 流等。

语法

js
ReadableStream.from(anyIterable)

参数

anyIterable

一个可迭代或异步可迭代对象。

返回值

一个ReadableStream。

异常

TypeError

如果传递的参数不是可迭代或异步可迭代（未定义[Symbol.iterator]()或[Symbol.asyncIterator]()方法），则抛出此异常。如果在迭代过程中，下一步的结果不是对象，或者是一个未解析为对象的 Promise，也会抛出此异常。

示例

将异步迭代器转换为 ReadableStream

此实时示例演示了如何将异步可迭代转换为ReadableStream，以及如何使用此流。

HTML

HTML 由单个<pre>元素组成，用于记录。

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

JavaScript

示例代码创建了一个log()函数，用于写入日志 HTML 元素。

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

然后，它检查是否支持静态方法，如果不支持，则记录结果。

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

异步可迭代是一个匿名生成器函数，当它被调用三次时，会产生值 1、2 和 3。它被传递给ReadableStream.from()以创建ReadableStream。

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

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

使用可读流演示了几种使用流的方法。下面的代码使用for ...await循环，因为此方法最简单。循环的每次迭代都会记录流中的当前块。

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

结果

使用流的输出显示在下面（如果支持ReadableStream.from()）。

将数组转换为 ReadableStream

此示例演示了如何将Array转换为ReadableStream。

JavaScript

可迭代只是一个字符串数组，它被传递给ReadableStream.from()以创建ReadableStream。

js
// An Array of vegetable names
const vegetables = ["Carrot", "Broccoli", "Tomato", "Spinach"];

// Create ReadableStream from the Array
const myReadableStream = ReadableStream.from(vegetables);

我们使用与上一个示例中相同的日志记录和使用流的方法，因此这里不再显示。

结果

输出显示在下面。

规范

规范
Streams 标准
# ref-for-rs-from

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅