TransformStream est désormais compatible avec plusieurs navigateurs

Maintenant que les flux de transformation sont compatibles avec Chrome, Safari et Firefox, ils sont enfin prêts pour un lancement grand public.

Navigateurs pris en charge

  • Chrome: 67 <ph type="x-smartling-placeholder">
  • Edge: 79 <ph type="x-smartling-placeholder">
  • Firefox: 102. <ph type="x-smartling-placeholder">
  • Safari: 14.1. <ph type="x-smartling-placeholder">

Source

L'API Streams vous permet de décomposer une ressource que vous souhaitez recevoir, envoyer ou transformer en petites fragments, puis de traiter ces fragments petit à petit. Récemment, Firefox 102 a commencé à prendre en charge TransformStream, ce qui signifie que TransformStream est maintenant et utilisable avec tous les navigateurs. Les flux de transformation vous permettent de transférer ReadableStream en WritableStream, qui exécute une transformation sur les fragments, ou consommer directement le résultat transformé, 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émo