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 thì chúng đã sẵn sàng cho thời gian vàng!

Kỷ niệm: Tính năng web này hiện đã có mặt trên cả 3 công cụ trình duyệt!

Hỗ trợ trình duyệt

• 67
• 79
• 102
• 14.1

Nguồn

API Luồng cho phép bạn chia nhỏ một 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 một. Gần đây, Firefox 102 bắt đầu hỗ trợ TransformStream, tức là TransformStream hiện đã có thể sử dụng 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 thi một phép biến đổi trên các đoạ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ạ