TransformStream

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

Das TransformStream-Interface der Streams-API ist eine konkrete Implementierung des transform streams Konzepts in der pipe chain.

Es kann an die Methode ReadableStream.pipeThrough() übergeben werden, um einen Datenstrom von einem Format in ein anderes zu transformieren. Beispielsweise kann es zum Dekodieren (oder Kodieren) von Videoframes, zum Dekomprimieren von Daten oder zur Konvertierung des Streams von XML zu JSON verwendet werden.

Ein Transformationsalgorithmus kann optional als Argument beim Objektkonstruktor bereitgestellt werden. Wird dieser nicht übergeben, werden die Daten beim Durchlaufen des Streams nicht verändert.

TransformStream ist ein übertragbares Objekt.

Konstruktor

TransformStream()

Erstellt und gibt ein Transformstream-Objekt zurück, mit optionaler Angabe eines Transformationsobjekts und Verwaltungsstrategien für die Streams.

Instanz-Eigenschaften

TransformStream.readable Schreibgeschützt

Das readable Ende eines TransformStream.

TransformStream.writable Schreibgeschützt

Das writable Ende eines TransformStream.

Instanz-Methoden

Keine

Beispiele

Any-to-uint8array-Stream

Im folgenden Beispiel gibt ein Transformstream alle erhaltenen Chunks als Uint8Array-Werte weiter.

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

Mehrere ReadableStreams verketteten

Dies ist ein nützliches Beispiel, bei dem mehrere Streams verknüpft werden können. Beispiele beinhalten den Aufbau einer PWA mit progressivem Laden und progressivem Streaming.

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

Beachten Sie, dass dies nicht widerstandsfähig gegenüber anderen Einflüssen ist.

Spezifikationen

Specification
Streams
# ts-class

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
TransformStream
TransformStream() constructor
transformer.cancel method
Experimental
readable
transferable
writable

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

Siehe auch