vue專案裡，每一個檔案，沒一個模組都可能呼叫介面，那麼就有請求正常、請求出錯的情況，請求正常裡又有成功返回資料和出現錯誤的情況，如果每次呼叫介面都重新寫一遍邏輯，是很沒必要的，那麼有沒有辦法能把公共的業務邏輯抽離出來呢？
答案當然是有的。
在入口檔案main.js裡使用axios的全域性攔截器axios.interceptors，同時可以結合vue-router來處理請求之後的各種跳轉等等。
大概配置如下，可根據具體情況自己改寫：
axios.interceptors.response.use(
response => {
// 如果返回的狀態碼為200，說明介面請求成功，可以正常拿到資料
// 否則的話丟擲錯誤
// if (response.status === 200) {
// return Promise.resolve(response);
// } else {
// return Promise.reject(response);
// }
if (response.data.success || response.data.success === undefined) {
console.log(iView);
iView.Message.info("response.data.error");
return Promise.resolve(response);
} else {
iView.Message.info("response.data.error");
return Promise.reject(response);
} },
// 伺服器狀態碼不是2開頭的的情況
// 這裡可以跟你們的後臺開發人員協商好統一的錯誤狀態碼
// 然後根據返回的狀態碼進行一些操作，例如登入過期提示，錯誤提示等等
// 下面列舉幾個常見的操作，其他需求可自行擴充套件
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登入
// 未登入則跳轉登入頁面，並攜帶當前頁面的路徑
// 在登入成功後返回當前頁面，這一步需要在登入頁操作。
case 401:
// router.replace({
// path: "/login",
// query: {
// redirect: router.currentRoute.fullPath
// }
// });
break;
// 403 token過期
// 登入過期對使用者進行提示
// 清除本地token和清空vuex中token物件
// 跳轉登入頁面
case 403:
// Toast({
// message: "登入過期，請重新登入",
// duration: 1000,
// forbidClick: true
// });
// // 清除token
// localStorage.removeItem("token");
// store.commit("loginSuccess", null);
// // 跳轉登入頁面，並將要瀏覽的頁面fullPath傳過去，
//登入成功後跳轉需要訪問的頁面
// setTimeout(() => {
// router.replace({
// path: "/login",
// query: {
// redirect: router.currentRoute.fullPath
// }
// });
// }, 1000);
break;
// 404請求不存在
case 404:
// Toast({
// message: "網路請求不存在",
// duration: 1500,
// forbidClick: true
// });
break;
// 其他錯誤，直接丟擲錯誤提示
default:
// Toast({
// message: error.response.data.message,
// duration: 1500,
// forbidClick: true
// });
}
return Promise.reject(error.response);
}
});
複製程式碼