Giờ đây, tính năng biến đổi luồng dữ liệu đã được hỗ trợ trong Chrome, Safari và Firefox nên cuối cùng, các trình phát này đã sẵn sàng để ra mắt!
API luồng cho phép bạn chia nhỏ tài nguyên mà bạn muốn nhận, gửi hoặc chuyển đổi thành các phần nhỏ, sau đó xử lý từng phần nhỏ này. Gần đây, Firefox 102 đã bắt đầu hỗ trợ TransformStream, nghĩa là TransformStream hiện đã có thể sử dụng được trên các trình duyệt. Biến đổi luồng cho phép bạn chuyển từ ReadableStream sang WritableStream, thực thi phép biến đổi trên các đoạn hoặc sử dụng trực tiếp kết quả đã chuyển đổi, như minh hoạ trong ví dụ sau.
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;
}
});