简单来说 vue 的拦截器 分为 请求拦截器 和 响应拦截器两种,
使用场景的话就是: 每次都要在请求中加入,token 判断是否登录,如果vue系统中 所有的请求都加入token,比较麻烦,每次送出请求,不过vue给我们 提供了一种方法 ---- 拦截器
拦截器在平时的项目中是比较使用频繁的 可以说在一个项目中 必不可少的
接下来我们说一下 在vue项目中 axios 拦截器的分类
1.请求拦截器
请求拦截器的作用是在请求发送前进进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易
//request拦截器 添加一个请求拦截器
axios.interceptors.request.use(function (config) {
let token = window.localStorage.getItem("token")
if (token) {
// 设置请求头
config.headers.common['Authorization'] = token
}
return config
}, function (error) {
//如果请求出错在此执行某些操作
return Promise.reject(error);
});
2.响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效需要重新登录的时候,跳转到登录页面
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
//登录超时
if(response.data.code==400){
router.push('/')
}
return response;
}, function (error) {
return Promise.reject(error);
});
3.移除拦截器
var myInterceptor = axios .interceptors.request.use(function() {/*...*/});
axios.interceptors.request.eject(myInterceptor);
4.为axios 实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function() {/*...*/});