ReadableStream: getReader() 方法

Baseline 已廣泛支援

此功能已成熟,並可在多種裝置和瀏覽器版本上使用。自 ⁨2019 年 1 月⁩起,它已在所有瀏覽器中可用。

注意:此功能在 Web Workers 中可用。

ReadableStream 介面的 getReader() 方法會建立一個 reader 並將流鎖定給該 reader。當流被鎖定後,在釋放該 reader 之前,無法獲取其他 reader。

語法

js
getReader()
getReader(options)

引數

options 可選

包含以下屬性的物件:

mode 可選

一個指定要建立的 reader 型別的屬性。值可以是

  • "byob",它會建立一個 ReadableStreamBYOBReader,它可以讀取可讀位元組流(當內部流緩衝區為空時,支援從底層位元組源到 reader 的零複製傳輸的流)。
  • undefined(或根本不指定 — 這是預設值),它會建立一個 ReadableStreamDefaultReader,它可以從流中讀取單個塊。

返回值

一個 ReadableStreamDefaultReaderReadableStreamBYOBReader 物件例項,具體取決於 mode 的值。

異常

RangeError

如果提供的 mode 值不是 "byob"undefined,則會丟擲此錯誤。

TypeError

如果你試圖為其建立 reader 的流已經被鎖定,或者不是一個 ReadableStream,則會丟擲此錯誤。如果請求 BYOB reader 但流控制器不是 ReadableByteStreamController(該流不是透過 type="bytes"構造 函式設定的底層源),也會丟擲此錯誤。

示例

在下面的簡單示例中,使用 getReader() 建立的 ReadableStreamDefaultReader 讀取了一個先前建立的自定義 ReadableStream。(有關完整程式碼,請參閱我們的 簡單隨機流示例)。每個塊被依次讀取並輸出到 UI,直到流讀取完畢,此時我們從遞迴函式中返回,並將整個流列印到 UI 的另一部分。

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

  // read() returns a promise that resolves
  // when a value has been received
  reader.read().then(function processText({ done, value }) {
    // Result objects contain two properties:
    // done  - true if the stream has already given you all its data.
    // value - some data. Always undefined when done is true.
    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;

    // Read some more, and call this function again
    return reader.read().then(processText);
  });
}

規範

規範
Streams
# ref-for-rs-get-reader⑤

瀏覽器相容性

另見