正文：

????????在現代Web開發中，實時數據流和長時間運行的請求變得越來越常見，尤其是在處理大量數據或進行實時通信時。在這種情況下，uniapp 提供的 ui.request 請求方法可以幫助我們輕松實現流式輸出請求。本文將介紹如何使用 uni.request 來實現流式數據請求，并處理實時返回的數據。

一、項目背景

????????假設你正在開發一款移動端應用，其中需要向服務器發起請求，獲取大量文本數據，并且這些數據需要逐步輸出，而不是一次性返回所有結果。這時候，流式請求是一個非常理想的解決方案，它可以在數據準備好后立即傳輸，而不需要等待完整的數據返回。

二、核心代碼解析

????????在本篇博客中，我們將分享一個典型的實現流式請求的代碼示例，幫助大家理解如何在 uniapp 中使用 ui.request 實現流式輸出。

const requestTask = uni.request({url: '這是你的接口',method: 'post',header: {},enableChunked: true,  // 啟用分塊傳輸responseType: 'text', // 響應類型為文本data: {},success: (res) => {console.log(res, '文本');},fail: (err) => {console.error('請求失敗:', err);}
});// 處理流式輸出
requestTask.onChunkReceived((res) => {this.xianshi_tt = false//用來解析let uint8Array = new TextDecoder('utf-8')let decodedString = uint8Array.decode(res.data)let dataList = decodedString.split('\n\n')dataList.forEach((item) => {if (item) {let gg = JSON.parse(item.replace('data:', ''));let content = gg.choices[0]..reasoning_content;// 檢查 content 是否有效并且不為空if (content && content !== "" && content !== undefined) {// 檢查 content 是否已經存在于 streamData 中，防止重復if (!this.streamData.includes(content)) {this.streamData.push(content);}}}})// 轉換數組為字符串this.wenan_content = this.streamData.join(''); // 將數組轉化為換行分隔的字符串
});

三、關鍵參數解析

1.?enableChunked: true

在進行流式數據請求時，enableChunked: true 是一個非常關鍵的配置項。它允許我們啟用 HTTP 分塊傳輸（Chunked Transfer Encoding），這樣服務器可以在數據準備好時就開始傳輸，而不必等到整個響應完成。

2.?responseType: 'text'

responseType: 'text' 指定了我們接收的數據類型為文本格式。通常在處理流式輸出時，文本數據會更容易進行解析和處理。

3.?onChunkReceived

流式輸出的處理主要通過 onChunkReceived 方法來實現。每當服務器發送新的數據塊時，這個回調函數就會被觸發，里面的邏輯會逐步接收和處理這些數據。

• TextDecoder?是用來將?Uint8Array?數據解碼為字符串的工具。在處理流式數據時，我們會獲取到分塊的字節流，需要將其解碼為字符串以便進一步操作。
• 數據被解碼后，通過?split('\n\n')?將文本按段落進行拆分，每一段數據都會被處理。

4.?數據處理邏輯

我們從 gg.choices[0]..reasoning_content 中提取出需要的文本數據，然后進行一系列的檢查：

• 確保內容有效（非空且未定義）。
• 確保內容沒有重復。

最后，通過 this.streamData.push(content) 將內容添加到 streamData 數組中，形成完整的文本內容。

5.?拼接字符串

所有有效的內容都被存儲在 this.streamData 數組中。在數據流逐步輸出的過程中，最終會通過 this.wenan_content = this.streamData.join(''); 將數組中的所有內容拼接成一個完整的字符串，從而實現流式輸出。

四、流式請求的優勢

1. 提高響應速度：?流式請求允許客戶端在數據逐步返回的過程中即時獲取并處理數據，而不需要等待完整的數據返回。
2. 減少內存占用：?不需要將所有數據一次性加載到內存中，而是分批處理，可以有效減小內存壓力。
3. 實時顯示：?對于用戶而言，流式輸出可以實現數據的實時顯示，提升用戶體驗。

五、總結

通過 uniapp 中的 ui.request 配合 enableChunked: true 配置，我們可以非常方便地實現流式輸出請求。這種方法適用于需要實時獲取和顯示大量數據的應用場景，能夠顯著提高應用的響應速度和用戶體驗。希望本文的代碼示例和解析能幫助你更好地理解流式請求的實現與應用。