现在,Chrome、Safari 和 Firefox 均支持转换流,因此,它们终于可以正式上线了!
借助 Streams API,您可以将要接收、发送或转换的资源分解成小数据块,然后逐条处理这些区块。最近,Firefox 102 开始支持 TransformStream
,这意味着 TransformStream
现在终于可以在各种浏览器中使用了。转换流允许您从 ReadableStream
通过管道连接到 WritableStream
,对区块执行转换,或直接使用转换后的结果,如以下示例所示。
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;
}
});
演示
浏览器支持