ReadableStream

Fetch API 的 ReadableStream 接口标识了一个可读的二进制数据流

构造

ReadableStream()

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

属性

ReadableStream.locked 只读

locked返回这个可读流是否被一个读取器Reader锁住。

方法

ReadableStream.cancel()

取消读取一束流, 消耗方发出一个信号，表示对这束流失去兴趣. 可以提供一个参数表示其原因给到底层代码, 使得不在应用这束流.

ReadableStream.getReader()

创建一个读取器（Reader） 类型可由 mode 选项决定, 并将流锁在这个读取器上. 当这束流被锁上, 其他的读取器不能获得它，直到它被释放.

ReadableStream.pipeThrough()

提供一个链式方法用于管道化一个现有的流，通过一个变换流或其他的可写可读对。

ReadableStream.pipeTo()

将现有的可读流管道输出给一个给定的可写流WritableStream，并在输出成功时保证填充，或在发生错误时返回拒绝。

ReadableStream.tee()

tee方法用来对可读流执行tee操作，返回包含两个元素的数组，每个元素是一个复制了原有流的可读流ReadableStream。

实例

下面的例子，创建了一个人造的ResponseResponse来流式化从别的资源处取得的HTML片段，给浏览器。

它演示了同Unit8ArrayUint8Array组合可读流ReadableStream 的用法。

fetch("https://www.example.org/").then((response) => {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // 下面的函数处理每个数据块
      function push() {
        // "done"是一个布尔型，"value"是一个Unit8Array
        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" } });
});

Specifications

Browser compatibility