ReadableStream.getReader()

Baseline 2022

Newly available

Since June 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

ReadableStream 接口的 getReader() 方法会创建一个 reader，并将流锁定。只有当前 reader 将流释放后，其他 reader 才能使用。

语法

js
getReader()
getReader(mode)

参数

mode 可选

具有 mode 参数的对象，值为 DOMString 类型，用来指定要创建的 reader 的类型。其值可以是：

返回值

ReadableStreamDefaultReader 类型或 ReadableStreamBYOBReader 类型的实例，取决于 mode 值。

异常

RangeError

提供的 mode 值既不是 "byob" 也不是 undefined。

TypeError

尝试创建 reader 的流不是 ReadableStream 类型。

示例

下面是个简单的例子，在读取 ReadableStream 前，使用 getReader() 创建一个 ReadableStreamDefaultReader。（查看全部代码：Simple random stream example）。按顺序读取每个分块，并传递给 UI，当整个流被读取完毕后，从递归方法中退出，并在 UI 的另一部分输出整个流。

js
function fetchStream() {
  const reader = stream.getReader();
  let charsReceived = 0;

  // read() 返回了一个 promise
  // 当数据被接收时 resolve
  reader.read().then(function processText({ done, value }) {
    // Result 对象包含了两个属性：
    // done  - 当 stream 传完所有数据时则变成 true
    // value - 数据片段。当 done 为 true 时始终为 undefined
    if (done) {
      console.log("Stream complete");
      para.textContent = value;
      return;
    }

    // value for fetch streams is a Uint8Array
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent =
      "Received " +
      charsReceived +
      " characters so far. Current chunk = " +
      chunk;
    list2.appendChild(listItem);

    result += chunk;

    // 再次调用这个函数以读取更多数据
    return reader.read().then(processText);
  });
}

规范

Specification
Streams Standard
# ref-for-rs-get-reader⑤

浏览器兼容性

BCD tables only load in the browser

参见