สตรีมการเปลี่ยนรูปแบบได้รับการสนับสนุนใน 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;
}
});