拦截器作用是在每次发送请求和接受响应时能做相应的处理,比如发送请求带上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拦截器
基础教程推荐
猜你喜欢
- iOS Crash常规跟踪方法及Bugly集成运用详细介绍 2023-01-18
- Android实现短信验证码输入框 2023-04-29
- Flutter进阶之实现动画效果(三) 2022-10-28
- iOS开发 全机型适配解决方法 2023-01-14
- iOS中如何判断当前网络环境是2G/3G/4G/5G/WiFi 2023-06-18
- Android开发Compose集成高德地图实例 2023-06-15
- iOS开发使用XML解析网络数据 2022-11-12
- MVVMLight项目Model View结构及全局视图模型注入器 2023-05-07
- IOS获取系统相册中照片的示例代码 2023-01-03
- Android Compose自定义TextField实现自定义的输入框 2023-05-13