為什么要使用axios攔截器？
頁(yè)面發(fā)送http請(qǐng)求尸昧，很多情況我們要對(duì)請(qǐng)求和其響應(yīng)進(jìn)行特定的處理缤弦；例如每個(gè)請(qǐng)求都附帶后端返回的token，在這種情況下彻磁，axios為開(kāi)發(fā)者提供了這樣一個(gè)API（攔截器）碍沐。
攔截器分為：
- 請(qǐng)求（request）攔截器
- 響應(yīng)（response）攔截器。
怎么操作衷蜓？
request.js的編寫(xiě)(一般是在utils文件夾創(chuàng)建一個(gè)request.js)
import axios from "axios";//引入axios
import router from "../router/index";//引入路由
import store from "../store";//如果需要在store內(nèi)取數(shù)據(jù)就要引入store
// 配置
const axiosInstance = axios.create({
baseURL: 'http://192.168.0.182:8080', //前部分地址
timeout: 20000 // 請(qǐng)求超時(shí)時(shí)間（單位ms）
})
// 添加請(qǐng)求攔截器
axiosInstance.interceptors.request.use(config => {
let token = localStorage.getItem("Token");
//當(dāng)前token值是本地存儲(chǔ)累提，如果放在store內(nèi)需store.state.token獲取token
if (token) {
// 給請(qǐng)求頭添加laohu-token
config.headers["Token"] = token;
}
return config;
},
error => {
console.log(error); // for debug
Promise.reject(error);
}
);
// 添加響應(yīng)攔截器
axiosInstance.interceptors.response.use(response=> {
// 如果返回的狀態(tài)碼為200，說(shuō)明接口請(qǐng)求成功磁浇，可以正常拿到數(shù)據(jù)
// 否則的話(huà)拋出錯(cuò)誤
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
}, error => {
// 服務(wù)器狀態(tài)碼不是2開(kāi)頭的的情況
// 這里可以跟你們的后臺(tái)開(kāi)發(fā)人員協(xié)商好統(tǒng)一的錯(cuò)誤狀態(tài)碼
// 然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作斋陪，例如登錄過(guò)期提示，錯(cuò)誤提示等等
// 下面列舉幾個(gè)常見(jiàn)的操作置吓，其他需求可自行擴(kuò)展
if (error.response.status) {
switch (error.response.status) {
// 401: 未登錄
// 未登錄則跳轉(zhuǎn)登錄頁(yè)面无虚，并攜帶當(dāng)前頁(yè)面的路徑
// 在登錄成功后返回當(dāng)前頁(yè)面，這一步需要在登錄頁(yè)操作衍锚。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token過(guò)期
// 登錄過(guò)期對(duì)用戶(hù)進(jìn)行提示
// 清除本地token和清空vuex中token對(duì)象
// 跳轉(zhuǎn)登錄頁(yè)面
case 403:
Message({
message: '登錄過(guò)期友题，請(qǐng)重新登錄',
duration: 1000,
forbidClick: true
});
....
// 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
default:
Message({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error);
});
//導(dǎo)出
export default axiosInstance;
在項(xiàng)目中調(diào)用攔截器
axios封裝好之后戴质，調(diào)用就很簡(jiǎn)單了度宦。我們把接口統(tǒng)一寫(xiě)在api文件夾中。（如果你的業(yè)務(wù)非常復(fù)雜告匠，建議把不同模塊或組件的請(qǐng)求分開(kāi)寫(xiě)到不同的文件里戈抄，這樣方便維護(hù)）。
//準(zhǔn)備
import $http from "@/utils/request.js";
import qs from "qs"http://用來(lái)序列化post類(lèi)型的數(shù)據(jù)后专，某些請(qǐng)求會(huì)用得到
//發(fā)送axios請(qǐng)求
export const 接口名 = (data) => $http.post('前部分地址+后部分地址',qs.stringify(data)).then((data)=>{
return data.data
})
在具體的組件中進(jìn)行調(diào)用
import { 接口名} from '@/api/接口js'
export default {
data() {
return {}
},
created() {
this.getData();
}
methods:{
getData() {
接口名(參數(shù)).then(res => {
console.log(res)
//拿到的res進(jìn)行一番操作或者渲染
})
}
},
}
補(bǔ)充：
關(guān)于Vue中划鸽，序列化字符串，處理發(fā)送請(qǐng)求的參數(shù)
使用工具qs來(lái)處理參數(shù)
步驟：
1戚哎、首先先下載：npm i qs
2裸诽、然后引入 ：import qs from 'qs'
3、qs主要有兩個(gè)方法 ：
方法一：將對(duì)象序列化建瘫，多個(gè)對(duì)象之間用&拼接（拼接是由底層處理崭捍，無(wú)需手動(dòng)操作）
qs.stringify() 轉(zhuǎn)換成查詢(xún)字符串
let comments = {content: this.inputValue}
let comValue = qs.stringify(comments)
方法二：將序列化的內(nèi)容拆分成一個(gè)個(gè)單一的對(duì)象
qs.parse() 轉(zhuǎn)換成json對(duì)象
let comValue = qs.parse(comments)
