TransformStream

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juni 2022 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die TransformStream-Schnittstelle der Streams API repräsentiert eine konkrete Implementierung des transform stream-Konzepts innerhalb der pipe chain.

Sie kann an die Methode ReadableStream.pipeThrough() übergeben werden, um einen Datenstrom von einem Format in ein anderes zu transformieren. Beispielsweise könnte sie verwendet werden, um Videoframes zu dekodieren (oder zu kodieren), Daten zu dekomprimieren oder den Stream von XML in JSON zu konvertieren.

Ein Transformationsalgorithmus kann als optionales Argument an den Objektkonstruktor übergeben werden. Wird dieser nicht bereitgestellt, werden die Daten nicht verändert, wenn sie durch den Stream geleitet werden.

TransformStream ist ein übertragbares Objekt.

Konstruktor

TransformStream(): Erstellt und gibt ein Transform-Stream-Objekt zurück, wobei optional ein Transformationsobjekt und Warteschlangenstrategien für die Streams spezifiziert werden können.

Instanz-Eigenschaften

TransformStream.readable Schreibgeschützt: Das readable-Ende eines TransformStream.
TransformStream.writable Schreibgeschützt: Das writable-Ende eines 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() });
  }
}

Mehrere ReadableStreams zusammenketten

Dies ist ein nützliches Beispiel, bei dem mehrere Streams verknüpft werden können. Beispiele dafür sind der Bau einer PWA mit progressivem Laden und progressivem 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(),
);

Beachten Sie, dass dies nicht gegen andere Einflüsse widerstandsfähig ist.