2022-08-15|閱讀時間 ‧ 約 3 分鐘

TransformStream 現在跨瀏覽器支援

現在串流轉換在 Chrome, Safari 和 Firefox 都已支援, 他們終於準備好迎接黃金時代!
Streams API 讓你分解資源, 特別是你想要收發或轉換成小小的片段, 然後每 bit 去處理這些片段. 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;
 }
});
分享至
成為作者繼續創作的動力吧!
叫我 KO, 我是一名軟體工程師. 我的文章不只是單純的譯文(翻譯原文), 而是會以我的角度理解, 把語言之間的隔閡拆解, 讓你輕鬆學習到知識. 領域基本上無設限, 前端, 後端, DevOps 都會觸及.
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

發表回應

成為會員 後即可發表留言