前言
提示:项目中使用到的axios请求拦截器,在此仅仅是记录,以下附上全部代码。
1.引入axios
import axios from "axios";
import { MessageBox } from 'element-ui' //可以不用,此处是使用elementUI 的弹框
2.设置请求基础路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
3.挂载请求拦截器
// request 拦截器
//挂载请求拦截器 (相当于请求的预验证,请求到达服务器之前先验证这次请求)
axios.interceptors.request.use(config => {
//为请求头添加对象,添加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem("token");
return config;
});
4.挂载响应拦截器
// response 拦截器
axios.interceptors.response.use(
response => {
const code = response.status;
if (code == 504) {
MessageBox.confirm("网络请求超时", "提示", {
showCancelButton: false,
type: "warning"
});
return Promise.reject(error);
}
if (code < 200 || code > 300) {
MessageBox.confirm(response.message, "提示", {
showCancelButton: false,
type: "warning"
});
return Promise.reject("error");
} else {
// console.log(response.data, "拦截 请求的 response.data");
if (response.data.status === -1) {
let statusText = "";
if (response.data.statusText) {
if (response.data.statusText.indexOf(":") !== -1) {
statusText = response.data.statusText.replace(":", "");
}
}
if (statusText) {
console.log(statusText, "44444");
MessageBox.confirm(statusText, "提示", {
showCancelButton: false,
type: "warning"
});
} else {
MessageBox.confirm(response.data.statusText, "提示", {
showCancelButton: false,
type: "warning"
});
}
return Promise.reject(response.data);
}
return response;
}
},
//响应错误拦截
error => {
let code = 0;
try {
code = error.response.status;
} catch (e) {
if (error.toString().indexOf("Error: timeout") !== -1) {
MessageBox.confirm("网络请求超时", "提示", {
showCancelButton: false,
type: "warning"
});
return Promise.reject(error);
}
if (error.toString().indexOf("Error: Network Error") !== -1) {
MessageBox.confirm("网络请求错误", "提示", {
showCancelButton: false,
type: "warning"
});
return Promise.reject(error);
}
}
if (code === 401) {
MessageBox.confirm("登录状态已过期,请重新登录", "系统提示", {
confirmButtonText: "重新登录",
showCancelButton: false,
showClose: false,
type: "warning"
}).then(() => {
// store.dispatch("LogOut").then(() => {
// location.reload(); // 为了重新实例化vue-router对象 避免bug
// });
});
} else if (code === 403) {
router.push({ path: "/401" });
} else {
const errorMsg = error.response.data.message;
if (errorMsg !== undefined) {
MessageBox.confirm(errorMsg, "提示", {
confirmButtonText: "确定",
showCancelButton: false,
showClose: false,
type: "warning"
});
}
}
return Promise.reject(error);
}
);
export default axios;
5.main.js中引入,挂载到vue原型上
// 引入具有拦截请求的axios
import xhrAxios from "./utils/xhrAxios";
Vue.prototype.$http = xhrAxios;