TransformStream

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since June 2022.

* Some parts of this feature may have varying levels of support.

Note: This feature is available in Web Workers.

Giao diện TransformStream của Streams API thể hiện cách triển khai cụ thể của khái niệm pipe chain transformstream.

Nó có thể được chuyển đến phương thức ReadableStream.pipeThrough() để chuyển đổi luồng dữ liệu từ định dạng này sang định dạng khác. Ví dụ: nó có thể được sử dụng để giải mã (hoặc mã hóa) khung hình video, giải nén dữ liệu hoặc chuyển đổi luồng từ XML sang JSON.

Thuật toán chuyển đổi có thể được cung cấp dưới dạng đối số tùy chọn cho hàm tạo đối tượng. Nếu không được cung cấp, dữ liệu sẽ không được sửa đổi khi truyền qua luồng.

TransformStream là một đối tượng có thể chuyển nhượng.

Trình xây dựng

TransformStream(): Tạo và trả về một đối tượng luồng biến đổi, tùy ý chỉ định một đối tượng biến đổi và các chiến lược xếp hàng cho các luồng.

Thuộc tính phiên bản

TransformStream.readable Read only: Phần cuối readable của TransformStream.
TransformStream.writable Read only: Phần cuối writable của TransformStream.

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() });
  }
}

Chaining multiple ReadableStreams together

This is a useful one, where multiple streams can be conjoined. Examples include building a PWA with progressive loading and progressive streaming.

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

Lưu ý rằng điều này không có khả năng phục hồi trước những ảnh hưởng khác.