流API解決了必須在處理之前等待所有數(shù)據(jù)到達(dá)的問題，從而使數(shù)據(jù)流入流中。這是通過三種核心類型來實(shí)現(xiàn)的：1。讀取數(shù)據(jù)塊，例如逐行讀取大量日誌文件，而不將其完全加載到內(nèi)存中； 2。用於逐步編寫數(shù)據(jù)的WritableStream，例如將視頻響應(yīng)直接流式傳輸?shù)椒?wù)工作者中的緩存； 3. TransformStream用於即時(shí)轉(zhuǎn)換數(shù)據(jù)，例如解壓縮GZIP響應(yīng)或解碼文本，允許有效的，可複合的管道；實(shí)際用例包括流媒體AI響應(yīng)，解析大型CSV，實(shí)時(shí)媒體處理以及使用進(jìn)度跟蹤的加密文件上傳，同時(shí)利用背壓並避免過多的內(nèi)存使用 - 使其成為一種強(qiáng)大的，無框架的工具，可以更快地構(gòu)建更快的構(gòu)建工具。

Web Streams API不僅僅是另一個(gè)抽象規(guī)格，它是一種實(shí)用的工具，多年來一直在悄悄地在網(wǎng)絡(luò)上實(shí)現(xiàn)更好的性能和用戶體驗(yàn)。無論您是否直接使用它，在獲取大型文件，處理媒體或處理實(shí)時(shí)數(shù)據(jù)時(shí)，您都有可能從中受益。讓我們紮實(shí)地了解它的實(shí)際功能，幫助您的實(shí)際功能以及如何有效使用它。

流API解決了什麼問題？

流式API以此為核心，解決了一個(gè)基本限制：您不必在開始使用之前等待所有數(shù)據(jù)到達(dá)。

想像一下下載100MB JSON文件。在傳統(tǒng)上， fetch()等待整個(gè)響應(yīng)在解析之前下載。這意味著用戶凝視著空白屏幕，直到下載結(jié)束為止，即使第一大數(shù)據(jù)可以立即渲染一些有用的東西。

流使您在到達(dá)時(shí)會(huì)逐步處理數(shù)據(jù)。這特別強(qiáng)大：

• 大型文件下載（例如CSV，視頻，日誌）
• 實(shí)時(shí)數(shù)據(jù)（例如，服務(wù)器量事件，AI響應(yīng)）
• 動(dòng)態(tài)轉(zhuǎn)換數(shù)據(jù)（例如，解壓縮，逐條解析）

您無需將所有內(nèi)容固定在記憶中，而可以逐步閱讀，轉(zhuǎn)換和消耗塊。

這三種流（以及何時(shí)使用它們）

流API定義了三種主要類型：

• readableSream ：數(shù)據(jù)流出（例如， fetch()響應(yīng)主體）
• WritableStream ：數(shù)據(jù)流入（例如，寫入文件或網(wǎng)絡(luò)）
• 轉(zhuǎn)換流：可讀和可寫的 - 傳遞數(shù)據(jù)時(shí)的數(shù)據(jù)

大多數(shù)實(shí)用的用例涉及將它們結(jié)合在一起。

1。在塊中讀取一個(gè)大文件

說您正在下載一個(gè)大日誌文件，並想顯示線到達(dá)時(shí)：

 const響應(yīng)=等待fetch（'/logs/gubit-file.log'）;
const reader = wenders.body.getReader（）;
const解碼器= new TextDecoder（）;

令buffer ='';

而（true）{
  const {done，value} =等待reader.read（）;
  如果（完成）休息；

  buffer = dexoder.decode（value，{stream：true}）;
  const lines = buffer.split（'\ n'）;
  buffer = lines.pop（）; //保持不完整的線路

  對(duì)於（const行線）{
    console.log（'處理行：'，行）;
    //更新UI，過濾或分析
  }
}

這樣可以避免將整個(gè)文件加載到內(nèi)存中並立即提供反饋。

2。通過轉(zhuǎn)換式的管道

是否想即時(shí)解壓縮GZIP響應(yīng)？還是將UTF-8字節(jié)流轉(zhuǎn)換為文本？

 const響應(yīng)=等待提?。?amp;#39;/data.json.gz'）;

const流=響應(yīng)。
  。
  。

const讀取器= stream.getReader（）;

而（true）{
  const {done，value} =等待reader.read（）;
  如果（完成）休息；
  console.log（'塊：'，value）; //流程解壓縮文本
}

這是乾淨(jìng)，可組合和高效的，沒有臨時(shí)的緩衝區(qū)。

3.寫入WritableStream（例如，服務(wù)工作者緩存）

在服務(wù)工作者中，您可以直接將響應(yīng)傳輸?shù)骄彺妫?/p>

 event.respondwith（
  （async（）=> {
    const響應(yīng)=等待提取（'/video.mp4'）;
    const {可讀，writable} = new Transformstream（）;

    //流對(duì)客戶端和緩存的響應(yīng)
    const響應(yīng)=響應(yīng)。 clone（）;
    響應(yīng)body.pipeto（writable）; //保存到緩存

    返回新的響應(yīng)（可讀，響應(yīng)電源）；
  }）（）（）
）；

這允許漸進(jìn)的緩存而無需阻止用戶。

實(shí)用的提示和陷阱

雖然強(qiáng)大，但溪流不是魔術(shù)。這是值得關(guān)注的地方：

• 瀏覽器支持在現(xiàn)代瀏覽器（Chrome，F(xiàn)irefox，Edge，Safari 14.1）中具有固體，但請(qǐng)檢查您是否支持較舊的環(huán)境。
• 錯(cuò)誤處理事項(xiàng)- 始終處理reader.read()拒絕並正確關(guān)閉流。
• 瀏覽器中的背壓是自動(dòng)的：如果您的消費(fèi)者很慢，則會(huì)停頓。這是一個(gè)功能，而不是錯(cuò)誤。
• 不要忘記解碼- response.body給您Uint8Array 。使用TextDecoderStream或手動(dòng)解碼。
• 避免混合異步和同步處理- 當(dāng)您擁抱異步流時(shí)，流效果最好。

您可能沒有意識(shí)到的真實(shí)世界用例

• AI Chat UIS ：從LLM API流式傳輸令牌，並在它們到達(dá)時(shí)顯示它們。
• CSV解析器：在瀏覽器中解析大型CSV，而無需加載整個(gè)文件。
• 音頻/視頻處理：在播放之前修改媒體塊（例如，過濾，水印）。
• 使用進(jìn)度加密的文件上傳：實(shí)時(shí)轉(zhuǎn)換塊，同時(shí)顯示上傳進(jìn)度。

這些不是邊緣案例，它們已成為標(biāo)準(zhǔn)期望。

流API與浮華的功能無關(guān)。這與效率，響應(yīng)能力和控制有關(guān)。一旦開始思考，您將看到機(jī)會(huì)使您的應(yīng)用程序更快，更具彈性。最好的部分？您不需要一個(gè)框架 - 只是提取，解碼器和異步迭代的一點(diǎn)耐心。

基本上，如果您在做任何事情之前都在等待所有數(shù)據(jù)，那麼您可能會(huì)做錯(cuò)了。

以上是對(duì)Web流API的實(shí)用查看的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！