本文抄自http://www.reibang.com/p/a0c67f4e145e
筆者只是用于加深自己的記憶放椰，故抄之使碾。大家可以看原作者簡書羔砾。
1. 在src目錄下創(chuàng)建api目錄孽水，在api目錄創(chuàng)建一個(gè)js文件
import axios from 'axios' //引入axios
//下面這兩個(gè)不一定需要引入，看項(xiàng)目本身堕油，但攔截器一般都會伴隨這某種緩存機(jī)制使用，如：vuex的store
import store from '@/store/index' //引入vuex的store
import router from '@/router' //引入vue的路徑管理router
2. 創(chuàng)建一個(gè)axios實(shí)例
let instance = axios.create({
// 設(shè)置統(tǒng)一的請求頭
headers: {
'content-type': 'application/x-form-urlencoded'
}
})
3. 編寫請求攔截器
這個(gè)攔截器會在你發(fā)送請求之前運(yùn)行
我的這個(gè)請求攔截器的功能是為我每一次請求去判斷是否有token肮之，如果有token存在則在請求頭上加這個(gè)這個(gè)token掉缺。后臺來判斷這個(gè)token是否過期。
//http request 攔截器
instance.interceptors.request.use(
config => {
if(store.state.token){ //判斷是否存在token戈擒，如果存在的話眶明，則每個(gè)http header都加上token
config.headers.authorization = atore.state.token //請求頭上加token
}
return config;
},
err => {
return Promise.reject(err);
}
)
4. 響應(yīng)攔截器
// http response 攔截器
instance.intercepyors.response.use(
response => {
//攔截響應(yīng)，做統(tǒng)一處理
if(response.data.code){
switch(response.data.code){
case 1002:
store.state.isLogin = false;
router.replace({
path: 'login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
}
return response;
},
//接口錯(cuò)誤狀態(tài)處理筐高，也就是說無響應(yīng)時(shí)的處理
error => {
return Promise.reject(error.response.status) //返回接口返回的錯(cuò)誤信息
}
)
5. 最后把實(shí)例導(dǎo)出就行了
export default instance
在需要的頁面導(dǎo)入就可以使用了
import instance from './axios'
// 驗(yàn)證登錄
export funtion handleLogin (data) {
return instance.post('/ds/user/login',date)
}
