รองรับ TransformStream ในหลายเบราว์เซอร์แล้ว

เมื่อ Chrome, Safari และ Firefox รองรับสตรีมการเปลี่ยนรูปแบบแล้ว สตรีมเหล่านี้ก็พร้อมเผยแพร่ในวงกว้างแล้ว!

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

เดโม

การสนับสนุนเบราว์เซอร์

การสนับสนุนเบราว์เซอร์

  • 67
  • 79
  • 102
  • 14.1

แหล่งที่มา

ส่วนหนึ่งของชุดหนังสือที่ทำงานร่วมกันแบบใหม่