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

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