TransformStream

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

TransformStream 是 Streams API 的一个接口，它表示 管道链转换流概念的具体实现。

它可以传递给 ReadableStream.pipeThrough() 方法，以便将数据流从一种格式转换为另一种格式。例如，它可以用来解码（或编码）视频帧、解压缩数据或将流从 XML 转换为 JSON。

转换算法可以作为可选参数提供给对象构造函数。如果未提供，则数据在通过流传输时不会被修改。

TransformStream 是一个可传输对象。

构造函数

TransformStream()

创建并返回一个转换流对象，可以选择指定一个转换对象和流的排队策略。

实例属性

TransformStream.readable 只读

TransformStream 的 readable 端。

TransformStream.writable 只读

TransformStream 的 writable 端。

实例方法

无

示例

任何内容到 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() });
  }
}

为 TextEncoderStream 和 TextDecoderStream 提供垫片

请注意，这已被本机构造函数弃用。这旨在作为不受支持平台的垫片。

js
const tes = {
  start() {
    this.encoder = new TextEncoder();
  },
  transform(chunk, controller) {
    controller.enqueue(this.encoder.encode(chunk));
  },
};

let _jstes_wm = new WeakMap(); /* info holder */
class JSTextEncoderStream extends TransformStream {
  constructor() {
    let t = { ...tes };

    super(t);
    _jstes_wm.set(this, t);
  }
  get encoding() {
    return _jstes_wm.get(this).encoder.encoding;
  }
}

类似地，TextDecoderStream 可以这样编写

js
const tds = {
  start() {
    this.decoder = new TextDecoder(this.encoding, this.options);
  },
  transform(chunk, controller) {
    controller.enqueue(this.decoder.decode(chunk, { stream: true }));
  },
};

let _jstds_wm = new WeakMap(); /* info holder */
class JSTextDecoderStream extends TransformStream {
  constructor(encoding = "utf-8", { ...options } = {}) {
    let t = { ...tds, encoding, options };

    super(t);
    _jstds_wm.set(this, t);
  }
  get encoding() {
    return _jstds_wm.get(this).decoder.encoding;
  }
  get fatal() {
    return _jstds_wm.get(this).decoder.fatal;
  }
  get ignoreBOM() {
    return _jstds_wm.get(this).decoder.ignoreBOM;
  }
}

将多个 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(),
);

请注意，这对于其他影响因素来说并不具有弹性。

规范

规范
流标准
# ts-class

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅