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" } });
});

• WHATWG Stream Visualiser, for a basic visualisation of readable, writable, and transform streams.