.jpg)
在uni-app中，通過(guò)封裝統(tǒng)一的網(wǎng)絡(luò)請(qǐng)求工具并配置攔截器，可實(shí)現(xiàn)請(qǐng)求攔截、響應(yīng)處理、錯(cuò)誤提示和自動(dòng)重試等功能。具體包括：1. 使用攔截器統(tǒng)一添加header、顯示loading、處理狀態(tài)碼；2. 分類(lèi)處理網(wǎng)絡(luò)層、http、業(yè)務(wù)層錯(cuò)誤，如斷網(wǎng)提示、狀態(tài)碼日志記錄、Token失效跳轉(zhuǎn)登錄；3. 封裝全局錯(cuò)誤監(jiān)聽(tīng)與自動(dòng)重試機(jī)制，提升應(yīng)用健壯性；4. 引入配置項(xiàng)實(shí)現(xiàn)攔截器靈活控制，便于調(diào)試與線上行為分離，從而規(guī)范項(xiàng)目網(wǎng)絡(luò)請(qǐng)求邏輯，提高可維護(hù)性。
在uni-app中，網(wǎng)絡(luò)請(qǐng)求的攔截和錯(cuò)誤處理是提升應(yīng)用健壯性和用戶(hù)體驗(yàn)的關(guān)鍵環(huán)節(jié)。很多人在開(kāi)發(fā)過(guò)程中容易忽略這部分配置，導(dǎo)致接口異常時(shí)無(wú)法及時(shí)反饋或統(tǒng)一處理。其實(shí)通過(guò)合理使用攔截器和全局錯(cuò)誤處理邏輯，可以有效減少重復(fù)代碼、統(tǒng)一錯(cuò)誤提示，還能自動(dòng)做一些兜底操作，比如斷網(wǎng)重試、token失效跳轉(zhuǎn)登錄等。
一、攔截器的作用與基本配置
攔截器本質(zhì)上是對(duì)發(fā)起請(qǐng)求和響應(yīng)返回這兩個(gè)階段進(jìn)行“干預(yù)”。在uni-app中，通常基于uni.request封裝一個(gè)統(tǒng)一的網(wǎng)絡(luò)請(qǐng)求工具，并在其基礎(chǔ)上添加請(qǐng)求攔截和響應(yīng)攔截。
以常見(jiàn)的封裝方式為例：
const http = { request(options) { // 請(qǐng)求攔截器 uni.showLoading({ title: '加載中' }); // 添加默認(rèn)參數(shù) options.url = 'https://api.example.com' + options.url; options.header = { ...options.header, 'Authorization': 'Bearer ' + store.getters.token }; return new Promise((resolve, reject) => { uni.request({ ...options, success: (res) => { // 響應(yīng)攔截器 uni.hideLoading(); if (res.statusCode === 200) { resolve(res.data); } else { uni.showToast({ title: '請(qǐng)求異常', icon: 'none' }); reject(res); } }, fail: (err) => { uni.hideLoading(); uni.showToast({ title: '網(wǎng)絡(luò)出錯(cuò)', icon: 'none' }); reject(err); } }); }); } };
在這個(gè)結(jié)構(gòu)里，你可以在每次請(qǐng)求發(fā)出前統(tǒng)一加header、顯示loading，在收到響應(yīng)后判斷狀態(tài)碼、隱藏loading、彈提示等。
二、常見(jiàn)錯(cuò)誤類(lèi)型及處理策略
網(wǎng)絡(luò)請(qǐng)求可能遇到的錯(cuò)誤大致分為三類(lèi)：網(wǎng)絡(luò)層錯(cuò)誤（如無(wú)網(wǎng)、超時(shí)）、HTTP 錯(cuò)誤（如404、500）、業(yè)務(wù)層錯(cuò)誤（如 token 失效、權(quán)限不足）。
針對(duì)這幾種情況，我們可以做不同的處理：
- 網(wǎng)絡(luò)錯(cuò)誤：彈窗提示用戶(hù)檢查網(wǎng)絡(luò)連接，或者嘗試重新發(fā)送一次。
- HTTP 狀態(tài)碼非 200：記錄日志，展示通用錯(cuò)誤信息。
- 業(yè)務(wù)錯(cuò)誤：根據(jù)后端返回的特定字段（如 code !== 0）來(lái)提示具體問(wèn)題，甚至觸發(fā)特定行為（如跳回登錄頁(yè)）。
舉個(gè)例子：
if (res.code === 401) { uni.showToast({ title: '身份已過(guò)期，請(qǐng)重新登錄', icon: 'none' }); setTimeout(() => { uni.reLaunch({ url: '/pages/login/login' }); }, 1500); }
這類(lèi)處理放在攔截器中會(huì)更集中，也更容易維護(hù)。
三、如何實(shí)現(xiàn)全局錯(cuò)誤監(jiān)聽(tīng)與自動(dòng)重試
uni-app本身沒(méi)有提供全局錯(cuò)誤監(jiān)聽(tīng)機(jī)制，但可以通過(guò)封裝的方式來(lái)實(shí)現(xiàn)類(lèi)似功能。例如，在封裝的http.JS中統(tǒng)一處理錯(cuò)誤，并對(duì)外暴露一個(gè)可配置的錯(cuò)誤回調(diào)函數(shù)。
此外，還可以加上簡(jiǎn)單的重試機(jī)制，比如在失敗時(shí)自動(dòng)重試一次：
let retryCount = 0; function requestWithRetry(options) { return new Promise((resolve, reject) => { const doRequest = () => { http.request(options) .then(resolve) .catch((err) => { if (retryCount < 1) { retryCount++; uni.showToast({ title: '正在重試...', icon: 'loading' }); setTimeout(doRequest, 1000); } else { reject(err); } }); }; doRequest(); }); }
這種做法適用于一些偶發(fā)性錯(cuò)誤，比如短暫斷網(wǎng)、服務(wù)器不穩(wěn)定等情況。
四、小技巧：把攔截器做得更靈活一點(diǎn)
如果你希望攔截器能根據(jù)不同環(huán)境（開(kāi)發(fā)/生產(chǎn)）或不同模塊做差異化處理，可以在封裝的時(shí)候預(yù)留鉤子函數(shù)，或者引入配置項(xiàng)。
比如：
const config = { enableLog: process.env.NODE_ENV === 'development', timeout: 10000 }; // 在攔截器中使用 config.enableLog 打印調(diào)試信息
這樣既能方便調(diào)試，又不會(huì)影響線上行為。
基本上就這些了。攔截器不是什么高深技術(shù)，但用好了可以讓整個(gè)項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求變得更規(guī)范、易維護(hù)。關(guān)鍵是把它封裝好之后堅(jiān)持使用，而不是到處寫(xiě)裸的uni.request。
.png)
