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

Dönüşüm akışları Chrome, Safari ve Firefox'ta desteklendiğinden nihayet prime time için hazır!

Streams API, almak, göndermek veya dönüştürmek istediğiniz kaynağı küçük parçalara ayırmanızı ve daha sonra bu parçaları parça parça işlemenizi sağlar. Firefox 102, yakın zamanda TransformStream etiketini desteklemeye başladı. Bu da TransformStream'in artık tüm tarayıcılarda kullanılabildiği anlamına geliyor. Dönüşüm akışları, aşağıdaki örnekte gösterildiği gibi, bir ReadableStream'ten WritableStream öğesine iş akışı yapmanıza, parçalarda bir dönüşüm yürütmenize veya dönüştürülen sonucu doğrudan kullanmanıza olanak tanır.

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