TransformStream

Baseline 廣泛可用 *

此特性已得到充分確立,可在多種裝置和瀏覽器版本上執行。自 ⁨2022 年 6 月⁩起,所有瀏覽器均支援此特性。

* 此特性的某些部分可能存在不同級別的支援。

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

TransformStream 介面是 Streams API 的一部分,代表了 管道鏈轉換流概念的具體實現。

它可以被傳遞給 ReadableStream.pipeThrough() 方法,以便將資料流從一種格式轉換為另一種格式。例如,它可用於解碼(或編碼)影片幀、解壓縮資料,或將流從 XML 轉換為 JSON。

轉換演算法可以作為可選引數傳遞給物件建構函式。如果未提供,則在透過流進行管道傳輸時資料不會被修改。

TransformStream 是一個 可轉移物件

建構函式

TransformStream()

建立並返回一個轉換流物件,可以選擇指定一個轉換物件和流的佇列策略。

例項屬性

TransformStream.readable 只讀

TransformStreamreadable 端。

TransformStream.writable 只讀

TransformStreamwritable 端。

例項方法

None

示例

任意型別到 Uint8Array 的流

在下面的示例中,一個轉換流會將它接收到的所有塊作為 Uint8Array 值傳遞出去。

js
const transformContent = {
  start() {}, // required.
  async transform(chunk, controller) {
    chunk = await chunk;
    switch (typeof chunk) {
      case "object":
        // just say the stream is done I guess
        if (chunk === null) {
          controller.terminate();
        } else if (ArrayBuffer.isView(chunk)) {
          controller.enqueue(
            new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength),
          );
        } else if (
          Array.isArray(chunk) &&
          chunk.every((value) => typeof value === "number")
        ) {
          controller.enqueue(new Uint8Array(chunk));
        } else if (
          typeof chunk.valueOf === "function" &&
          chunk.valueOf() !== chunk
        ) {
          this.transform(chunk.valueOf(), controller); // hack
        } else if ("toJSON" in chunk) {
          this.transform(JSON.stringify(chunk), controller);
        }
        break;
      case "symbol":
        controller.error("Cannot send a symbol as a chunk part");
        break;
      case "undefined":
        controller.error("Cannot send undefined as a chunk part");
        break;
      default:
        controller.enqueue(this.textencoder.encode(String(chunk)));
        break;
    }
  },
  flush() {
    /* do any destructor work here */
  },
};

class AnyToU8Stream extends TransformStream {
  constructor() {
    super({ ...transformContent, textencoder: new TextEncoder() });
  }
}

鏈式連線多個 ReadableStream

這是一個很有用的場景,可以連線多個流。例如,構建一個具有漸進載入和漸進式流式傳輸功能的 PWA。

js
let responses = [
  /* conjoined response tree */
];
let { readable, writable } = new TransformStream();

responses.reduce(
  (a, res, i, arr) =>
    a.then(() => res.pipeTo(writable, { preventClose: i + 1 !== arr.length })),
  Promise.resolve(),
);

請注意,這並不能抵抗其他影響。

規範

規範
Streams
# ts-class

瀏覽器相容性

另見