ReadableStream - 表示字节数据的可读流

ReadableStream 是 Streams API 的接口，表示字节数据的可读流。 Fetch API 通过 Response 对象的 body 属性提供 ReadableStream 的具体实例。

构造函数

ReadableStream()

从给定的处理程序创建并返回可读的流对象。

属性

ReadableStream.locked 只读

locked getter 返回是否将可读流锁定到读取器。

方法

ReadableStream.cancel()

取消流，表示消费者对流失去兴趣。reason 参数将被提供给基础数据源，该数据源可以使用它，也可以不使用它。

ReadableStream.getReader()

创建一个读取器并将流锁定到该读取器。流被锁定时，在释放该读取器之前，无法获取其他读取器。

ReadableStream.pipeThrough()

提供一种将当前流通过转换流或任何其他可写 / 可读对传递的可链接方式。

ReadableStream.pipeTo()

将当前 ReadableStream 管道传输到给定的 WritableStream，并返回一个 Promise，当管道过程成功完成时，则执行该 Promise，如果遇到任何错误，就会拒绝。

ReadableStream.tee()

tee 方法 tees 此可读流，返回一个包含两个结果分支的两元素数组，作为新的 ReadableStream 实例。每个流接收相同的传入数据。

实例

在以下实例中，创建了一个 Response，以将从其他资源获取的 HTML 片段流式传输到浏览器。

它演示了 ReadableStream 与 Uint8Array 结合的用法。

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.enqueue(value);
          push();
        });
      };

      push();
    }
  });

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

规范

规范	状态	备注
Streams ReadableStream 的定义	现行的标准	初始定义

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• WHATWG 流视图，用于可读性，可写性和转换流的基本可视化。