回顧
上次呢分享了axios以下內容：
- 如何封裝Get、Post、Delet、Put方法
- 統一管理api請求及如何使用
前言
今天主要分享一下如何攜帶登錄狀態的token資訊等以及如何集中管理請求回傳的錯誤code，
本次的內容主要涉及到axios的請求攔截、回應攔截，
PS：本次案例展示的所有代碼，依舊寫在request.js里（上次分享的檔案）
一、請求攔截
1. 什么是請求攔截呢？
請求攔截器的作用是在請求發送前進行一些操作，例如在每個請求體里加上token，統一做了處理如果以后要改也非常容易
2. 代碼示例
下面呢，給大家放一下代碼，可以一目了然，
import axios from "axios";
// 創建axios實體
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 30000,
});
// request請求攔截器
service.interceptors.request.use(
config => {
// 在發送請求之前做些什么，例如加入token
config.headers["token"] = "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ"; //請求頭中添加token
config.headers["userId"] = '131313';//可以添加專案需要的一些資訊等等...
return config;
},
error => {
Promise.reject(error);
}
);
二、回應攔截
1. 什么是回應攔截呢？
回應攔截器的作用是在接收到回應后進行一些操作，可以統一管理回傳的狀態碼，最常見的例如在服務器回傳登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁，
代碼如下（示例）：
// 回應攔截器
axios.interceptors.response.use(
response => {
// 在接收回應做些什么
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服務器狀態碼不是200的情況
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登錄
// 未登錄則跳轉登錄頁面，并攜帶當前頁面的路徑
// 在登錄成功后回傳當前頁面，這一步需要在登錄頁操作，
case 401:
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
});
break;
// 403 token過期
case 403:
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);
}
}
);
總結
今天的內容就分享到這里了，歡迎提意見~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/266697.html
標籤：其他
上一篇：日期差值