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