TransformStream artık tarayıcılar arası bir destek sunuyor

Dönüşüm akışları artık Chrome, Safari ve Firefox'ta desteklendiğine göre nihayet prime-time için hazır!

Tarayıcı Desteği

  • Chrome: 67..
  • Kenar: 79..
  • Firefox: 102..
  • Safari: 14.1.

Kaynak

Streams API almak, göndermek veya dönüştürmek istediğiniz kaynağı küçük parçalara ayırmanızı ve bu parçaları parça parça işlemenizi sağlar. Yakın zamanda, Firefox 102 TransformStream desteklemeye başladı, Yani TransformStream artık tüm tarayıcılarda kullanılabilir. Dönüşüm akışları, ReadableStream itibarıyla bir WritableStream, dönüştürme veya dönüştürülmüş sonucu doğrudan tüketme, aşağıda gösterildiği gibidir.

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