TransformStream hiện được hỗ trợ trên nhiều trình duyệt

Giờ đây, khi các luồng biến đổi được hỗ trợ trong Chrome, Safari và Firefox, chúng đã sẵn sàng cho thời điểm quan trọng!

Browser Support

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Source

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

Bản minh hoạ