拦截器作用是在每次发送请求和接受响应时能做相应的处理,比如发送请求带上token,响应时将数据二次过滤,做一些逻辑判断。关键字 interceptorsaxios.interceptors.requerst.use()拦截发送请求axios.interceptors....
拦截器作用是在每次发送请求和接受响应时能做相应的处理,比如发送请求带上token,响应时将数据二次过滤,做一些逻辑判断。
关键字 interceptors
axios.interceptors.requerst.use()拦截发送请求
axios.interceptors.response.use()拦截获取到的响应
附上我在开发实际项目中的代码
import axios from 'axios'
import {Message} from 'element-ui'
import store from '@/store'
//interceptor 拦截器
function interceptor(){
axios.interceptors.request.use(
config => {
const token = store.getters.getToken;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.reject(error);
}
)
axios.interceptors.response.use(
response => {
if(response.status === 200){
return Promise.resolve(response.data);
}else{
return Promise.reject(response.data);
}
},
error => {
if(error.response.status){
//401: 未登录 403 token过期
switch(error.response.status){
case 401:
Message.error("身份验证失败,请登录")
this.$route.replace("/login");
break;
case 403:
Message.error("登录过期,请重新登录")
this.$route.replace("/login");
break;
default: Message.error(error.response.data.message);
}
return Promise.reject(error.response);
}
}
)
}
export default interceptor;
织梦狗教程
本文标题为:axios拦截器
基础教程推荐
猜你喜欢
- Flutter绘图组件之CustomPaint使用详解 2023-05-12
- 解决Android Studio突然不显示logcat日志的问题 2023-02-04
- iOS开发教程之XLForm的基本使用方法 2023-05-01
- Android开发使用RecyclerView添加点击事件实例详解 2023-06-15
- android studio按钮监听的5种方法实例详解 2023-01-12
- Flutter手势密码的实现示例(附demo) 2023-04-11
- Android多返回栈技术 2023-04-15
- Android中的webview监听每次URL变化实例 2023-01-23
- IOS 播放系统提示音使用总结(AudioToolbox) 2023-03-01
- IOS应用内跳转系统设置相关界面的方法 2022-11-20
