Streams API

概念與用法

流式傳輸涉及將您想要透過網路接收的資源分解成小塊，然後逐塊處理。瀏覽器在接收媒體資源時已經這樣做了——影片在下載更多內容時進行緩衝和播放，有時您也會看到影像隨著載入的增多而逐漸顯示。

但以前 JavaScript 無法使用此功能。之前，如果我們想處理某種資源（影片、文字檔案等），就必須下載整個檔案，等待其反序列化為合適的格式，然後再處理所有資料。

有了 Streams API，您可以開始逐塊處理原始資料，只要資料可用，就可以立即處理，而無需生成緩衝區、字串或 Blob。

還有更多優勢——您可以檢測流的開始或結束，將流連結在一起，按需處理錯誤和取消流，以及響應流的讀取速度。

Streams 的使用依賴於將響應作為流提供。例如，成功 fetch 請求返回的響應體是一個 ReadableStream，可以使用透過 ReadableStream.getReader() 建立的讀取器來讀取。

更復雜的用法涉及使用 ReadableStream() 建構函式建立自己的流，例如在 Service Worker 中處理資料。

您也可以使用 WritableStream 將資料寫入流。

Stream 介面

可讀流 (Readable streams)

ReadableStream

表示一個可讀的資料流。它可以用於處理 Fetch API 的響應流，或開發者定義的流（例如，自定義的 ReadableStream() 建構函式）。

ReadableStreamDefaultReader

表示一個預設讀取器，可用於讀取網路提供的資料流（例如，fetch 請求）。

ReadableStreamDefaultController

表示一個控制器，允許控制 ReadableStream 的狀態和內部佇列。預設控制器用於非位元組流。

可寫流 (Writable streams)

WritableStream

為將流式資料寫入目的地（稱為“宿”）提供了一個標準的抽象。此物件內建了反壓和排隊機制。

WritableStreamDefaultWriter

表示一個預設的可寫流寫入器，可用於將資料塊寫入可寫流。

WritableStreamDefaultController

表示一個控制器，允許控制 WritableStream 的狀態。在構造 WritableStream 時，底層的宿會獲得一個相應的 WritableStreamDefaultController 例項來操作。

轉換流 (Transform Streams)

TransformStream

表示一個流物件的抽象，該物件在資料透過流物件 管道鏈時轉換資料。

TransformStreamDefaultController

提供方法來操作與轉換流相關的 ReadableStream 和 WritableStream。

相關的流 API 和操作

ByteLengthQueuingStrategy

提供一個內建的位元組長度排隊策略，可在構造流時使用。

CountQueuingStrategy

提供一個內建的塊計數排隊策略，可在構造流時使用。

對其他 API 的擴充套件

Request

當構造一個新的 Request 物件時，您可以在其 RequestInit 字典的 body 屬性中傳入一個 ReadableStream。然後可以將此 Request 傳遞給 fetch() 來開始獲取流。

Response.body

成功 fetch 請求返回的響應體預設以 ReadableStream 的形式暴露，可以附加讀取器等。

與位元組流相關的介面

ReadableStreamBYOBReader

表示一個 BYOB (“bring your own buffer”，自帶緩衝區) 讀取器，可用於讀取開發者提供的資料流（例如，自定義的 ReadableStream() 建構函式）。

ReadableByteStreamController

表示一個控制器，允許控制 ReadableStream 的狀態和內部佇列。位元組流控制器用於位元組流。

ReadableStreamBYOBRequest

表示 ReadableByteStreamController 中的一個拉取請求。

示例

我們已經建立了一個示例目錄來配合 Streams API 文件——請參閱 mdn/dom-examples/streams。示例如下：

• 簡單的流泵 (Simple stream pump)：此示例展示瞭如何消耗一個 ReadableStream 並將其資料傳遞給另一個。
• PNG 灰度化 (Grayscale a PNG)：此示例展示瞭如何將 PNG 的 ReadableStream 轉換為灰度。
• 簡單的隨機流 (Simple random stream)：此示例展示瞭如何使用自定義流生成隨機字串，將它們排隊作為塊，然後再次讀出。
• 簡單的 tee 示例 (Simple tee example)：此示例擴充套件了簡單的隨機流示例，展示瞭如何對流進行 tee 操作，以及如何獨立讀取兩個結果流。
• 簡單的寫入器 (Simple writer)：此示例展示瞭如何寫入一個可寫流，然後解碼該流並將內容寫入 UI。
• 解壓 PNG 的塊 (Unpack chunks of a PNG)：此示例展示瞭如何使用 pipeThrough() 將一個 PNG 檔案的資料轉換為 PNG 塊流，從而將 ReadableStream 轉換為其他資料型別的流。

來自其他開發者的示例

• 使用 Streams、Service Workers 和 Fetch 的進度指示器.

規範

瀏覽器相容性

api.ReadableStream

api.WritableStream

另見

• Streams API 概念
• 使用可讀流
• 使用可讀位元組流
• 使用可寫流