TransformStream est désormais compatible avec plusieurs navigateurs

Maintenant que les flux de transformation sont pris en charge dans Chrome, Safari et Firefox, ils sont enfin prêts pour un lancement grand public !

L'API Streams vous permet de décomposer en petits fragments une ressource que vous souhaitez recevoir, envoyer ou transformer, puis de traiter ces fragments petit à petit. Récemment, Firefox 102 a commencé à prendre en charge TransformStream, ce qui signifie que TransformStream est désormais utilisable dans tous les navigateurs. Les flux de transformation vous permettent de rediriger depuis un ReadableStream vers un WritableStream, en exécutant une transformation sur les fragments, ou de consommer le résultat transformé directement, comme illustré dans l'exemple suivant.

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

Démonstration

Prise en charge des navigateurs

Fait partie de la série sur l'interopérabilité des nouveaux produits