ReadableStream.getReader()

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
# ref-for-rs-get-reader⑤

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
getReader

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见