รองรับ 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;
  }
});

สาธิต