ReadableStream

流操作API 中的ReadableStream 接口呈现了一个可读取的二进制流操作。Fetch API 通过 Response 的属性 body (en-US) 提供了一个具体的 ReadableStream 对象。

构造函数

ReadableStream()
创建并从给定的 Handler 返回一个可读流对象。

属性

ReadableStream.locked (en-US) 只读
locked 返回这个可读流是否被一个读取器锁定

方法

ReadableStream.cancel() (en-US)
取消读取流,读取方发出一个信号,表示对这束流失去兴趣。可以传入 reason 参数表示取消原因,这个原因将传回给调用方。
ReadableStream.getIterator()
创建一个异步的 ReadableStream 迭代器并将流锁定于其上。一旦流被锁定,其他读取器将不能读取它,直到它被释放。
ReadableStream.getReader()
创建一个读取器并将流锁定于其上。一旦流被锁定,其他读取器将不能读取它,直到它被释放。
ReadableStream.pipeThrough() (en-US)
提供将当前流管道输出到一个 transform 流或 writable/readable 流对的链式方法。
ReadableStream.pipeTo() (en-US)
将当前 ReadableStream 管道输出到给定的 WritableStream (en-US),并返回一个 promise,输出过程成功时返回 fulfilled,在发生错误时返回 rejected。
ReadableStream.tee() (en-US)
tee 方法(tee本意是将高尔夫球放置在球座上)tees 了可读流,返回包含两个ReadableStream 实例分支的数组,每个元素接收了相同的传输数据。
ReadableStream[@@asyncIterator]()
getIterator 方法的别名。

示例

下面的例子,创建了一个智能的 Response 来流式化从别的资源处取得的HTML 片段。

它演示了 ReadableStream 与 Uint8Array (en-US) 的协同用法。

fetch("https://www.example.org/").then((response) => {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // 下面的函数处理每个数据块
      function push() {
        // "done"是一个布尔型,"value"是一个Uint8Array
        reader.read().then(({ done, value }) => {
          // 判断是否还有可读的数据?
          if (done) {
            // 告诉浏览器已经结束数据发送
            controller.close();
            return;
          }

          // 取得数据并将它通过controller发送给浏览器
          controller.enqueue(value);
          push();
        });
      };

      push();
    }
  });

  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});

规范

Specification Status Comment
Streams
ReadableStream
Living Standard 初始定义

浏览器兼容性

BCD tables only load in the browser

相关链接