Chrome, Safari và Firefox hiện đã hỗ trợ biến đổi luồng dữ liệu, cuối cùng các luồng này đã sẵn sàng để phát hành chính thức!
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 biế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. Luồng biến đổi cho phép bạn chuyển từ ReadableStream sang WritableStream, thực hiện biến đổi trên các phân đoạn hoặc trực tiếp sử dụng kết quả đã chuyển đổi, như 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;
}
});
Bản minh hoạ
Hỗ trợ trình duyệt
Một phần trong Loạt video mới có khả năng tương tác