TransformStream wird jetzt browserübergreifend unterstützt

Da Umwandlungsstreams jetzt in Chrome, Safari und Firefox unterstützt werden, kann es endlich losgehen!

Mit der Streams API können Sie eine Ressource, die Sie empfangen, senden oder umwandeln möchten, in kleine Einheiten aufteilen und diese Teile dann Stück für Stück verarbeiten. Seit Kurzem wird TransformStream in Firefox 102 unterstützt. Das bedeutet, dass TransformStream jetzt endlich browserübergreifend verwendet werden kann. Mit Transformationsstreams können Sie eine Pipe von einem ReadableStream zu einem WritableStream ausführen, eine Transformation für diese Blöcke ausführen oder das transformierte Ergebnis direkt verwenden, wie im folgenden Beispiel gezeigt.

class UpperCaseTransformStream {
  constructor() {
    return new TransformStream({
      transform(chunk, controller) {
        controller.enqueue(chunk.toUpperCase());
      },
    });
  }
}

button.addEventListener('click', async () => {
  const response = await fetch('/script.js');
  const readableStream = response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(new UpperCaseTransformStream());

  const reader = readableStream.getReader();
  pre.textContent = '';
  while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      pre.textContent += value;
  }
});

Demo

Unterstützte Browser

Unterstützte Browser

  • 67
  • 79
  • 102
  • 14.1

Quelle

Teil der Reihe zur neuen Interoperabilität