--- title: ReadableStream slug: Web/API/ReadableStream tags: - API - Fetch - ReadableStream - 引用 - 接口 translation_of: Web/API/ReadableStream ---

{{APIRef("Fetch")}}

流操作API 中的ReadableStream 接口呈现了一个可读取的二进制流操作。Fetch API 通过 {{domxref("Response")}} 的属性 {{domxref("Body.body", "body")}} 提供了一个具体的 ReadableStream 对象。

构造函数

{{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}
创建并从给定的 Handler 返回一个可读流对象。

属性

{{domxref("ReadableStream.locked")}} {{readonlyInline}}
locked 返回这个可读流是否被一个读取器锁定。

方法

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

示例

下面的例子，创建了一个智能的 {{domxref("Response")}} 来流式化从别的资源处取得的HTML 片段。

它演示了 {{domxref("ReadableStream")}} 与 {{domxref("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发送给浏览器
          controller.enqueue(value);
          push();
        });
      };

      push();
    }
  });

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

规范

Specification Status Comment
{{SpecName('Streams','#rs-class','ReadableStream')}} {{Spec2('Streams')}} 初始定义

浏览器兼容性

{{Compat("api.ReadableStream")}}

相关链接