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

Giờ đây, các luồng chuyển đổi đã được hỗ trợ trong Chrome, Safari và Firefox, cuối cùng các luồng này đã sẵn sàng cho giờ vàng!

Hỗ trợ trình duyệt

  • Chrome: 67.
  • Cạnh: 79.
  • Firefox: 102.
  • Safari: 14.1.

Nguồn

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ý các phần này từng phần một. Gần đây, Firefox 102 đã bắt đầu hỗ trợ TransformStream, điều đó có nghĩa là TransformStream hiện là dễ sử dụng trên các trình duyệt. Việc chuyển đổi luồng cho phép bạn chuyển hướng từ một ReadableStream thành một WritableStream, thực thi một biến đổi trên các phần hoặc trực tiếp sử dụng kết quả đã biế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ạ