建站
咨詢
售后
建站咨詢
新聞中心
在基于Promise的HTTP客戶端中，axios是一個(gè)廣泛使用的庫，它提供了一種簡潔明了的方式來發(fā)送異步HTTP請(qǐng)求到REST端點(diǎn)，在使用axios時(shí)，我們經(jīng)常需要對(duì)請(qǐng)求和響應(yīng)進(jìn)行攔截，以便于統(tǒng)一處理一些邏輯，例如認(rèn)證失效、接口報(bào)錯(cuò)、請(qǐng)求重定向等，以下將詳細(xì)討論如何使用axios的響應(yīng)攔截器來處理報(bào)錯(cuò)。
成都創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為華容企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)，華容網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
我們需要設(shè)置axios的響應(yīng)攔截器，響應(yīng)攔截器允許我們?cè)谡?qǐng)求得到響應(yīng)后，對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理或修改，這非常實(shí)用，因?yàn)槲覀兛梢栽谶@里檢查HTTP狀態(tài)碼，并根據(jù)需要處理業(yè)務(wù)邏輯錯(cuò)誤。
// 創(chuàng)建axios實(shí)例
const service = axios.create({
// axios 配置項(xiàng)
});
// 響應(yīng)攔截器
service.interceptors.response.use(
response => {
// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
const res = response.data;
// 這里可以根據(jù)后端接口返回?cái)?shù)據(jù)的結(jié)構(gòu)進(jìn)行判斷
if (res.code !== 200) {
// 業(yè)務(wù)邏輯錯(cuò)誤處理
// 可以根據(jù)實(shí)際情況，做彈出提示，或者其他的錯(cuò)誤處理邏輯
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
});
// 如果是業(yè)務(wù)錯(cuò)誤，我們返回一個(gè)Promise.reject，這樣可以在后續(xù)的.catch中捕獲
return Promise.reject(new Error(res.message || 'Error'));
} else {
// 業(yè)務(wù)成功，返回response對(duì)象
return response;
}
},
error => {
// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
if (error.response) {
// 請(qǐng)求已發(fā)出，但服務(wù)器響應(yīng)的狀態(tài)碼不在2xx的范圍
const res = error.response.data;
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
});
} else if (error.request) {
// 請(qǐng)求已經(jīng)發(fā)出了，但是沒有收到響應(yīng)
Message({
message: 'Network Error',
type: 'error',
duration: 5 * 1000
});
} else {
// 發(fā)送請(qǐng)求時(shí)出了點(diǎn)問題
Message({
message: error.message || 'Request Error',
type: 'error',
duration: 5 * 1000
});
}
// 我們返回一個(gè)Promise.reject，這樣可以在后續(xù)的.catch中捕獲
return Promise.reject(error);
}
);
在上述代碼中，我們首先創(chuàng)建了一個(gè)axios實(shí)例并為其添加了響應(yīng)攔截器，攔截器由兩部分組成：一個(gè)是處理正常響應(yīng)的回調(diào)，另一個(gè)是處理異常的回調(diào)。
當(dāng)接口返回的業(yè)務(wù)狀態(tài)碼不是我們預(yù)定的成功狀態(tài)碼時(shí)，我們會(huì)在第一個(gè)回調(diào)函數(shù)中處理這種情況，通常，后端服務(wù)會(huì)返回一個(gè)包含業(yè)務(wù)錯(cuò)誤信息的JSON對(duì)象，我們會(huì)彈出錯(cuò)誤信息，并調(diào)用Promise.reject()來拒絕這個(gè)Promise，使得后續(xù)的.then()不會(huì)被執(zhí)行，而是直接跳轉(zhuǎn)到.catch()中去。
對(duì)于異常處理，我們檢查error.response是否存在來區(qū)分錯(cuò)誤類型，如果error.response存在，說明請(qǐng)求已發(fā)出且服務(wù)器有響應(yīng)，但狀態(tài)碼不是2xx，這時(shí)我們可以根據(jù)服務(wù)器返回的錯(cuò)誤信息進(jìn)行提示，如果不存在，可能是請(qǐng)求發(fā)出前發(fā)生了錯(cuò)誤，例如網(wǎng)絡(luò)問題，或者是請(qǐng)求配置不正確。
特別需要注意的是，當(dāng)token失效時(shí)，可能會(huì)在一次用戶操作中引發(fā)多個(gè)請(qǐng)求失敗，導(dǎo)致多次彈出錯(cuò)誤提示，這會(huì)影響用戶體驗(yàn)，為了解決這個(gè)問題，我們可以設(shè)置一個(gè)全局變量來控制提示只彈出一次。
let hasTokenErrorShown = false;
// 部分異常處理代碼
if (error.response && error.response.status === 401 && !hasTokenErrorShown) {
hasTokenErrorShown = true;
Message({
message: 'Token expired, please login again',
type: 'error',
duration: 5 * 1000
});
}
通過上述機(jī)制，我們不僅統(tǒng)一了錯(cuò)誤處理的方式，而且避免了因?yàn)橹貜?fù)錯(cuò)誤導(dǎo)致的頻繁提示，提升了用戶界面的友好性。
為了避免在攔截器中由于編程疏忽導(dǎo)致的問題，比如在響應(yīng)攔截器中忘記返回response對(duì)象，我們需要仔細(xì)檢查攔截器的邏輯，確保任何情況下，use函數(shù)中的兩個(gè)回調(diào)都正確返回了Promise對(duì)象。
使用axios的攔截器可以有效地對(duì)HTTP請(qǐng)求進(jìn)行監(jiān)控和管理，它為我們提供了一個(gè)強(qiáng)大的機(jī)制來處理API調(diào)用過程中可能出現(xiàn)的各種情況，從而增強(qiáng)應(yīng)用的可維護(hù)性和用戶體驗(yàn)。
本文題目：axios攔截響應(yīng)報(bào)錯(cuò)
本文網(wǎng)址：http://fisionsoft.com.cn/article/ccoddec.html
