TransformStream 現在支援跨瀏覽器

現在已支援 Chrome、Safari 和 Firefox 轉換串流，這些轉換串流終於可及時了！

瀏覽器支援

  • Chrome：67.
  • Edge：79，
  • Firefox：102。
  • Safari：14.1。

資料來源

Streams API 可讓您將想要接收、傳送或轉換的資源細分為小區塊，然後逐一處理這些區塊。最近，Firefox 102 開始支援 TransformStream， 這表示 TransformStream 還能在不同瀏覽器上使用轉換串流可讓您從 將 ReadableStream 轉換為 WritableStream，執行 或是直接取用轉換後的結果 如以下範例所示

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

示範