一、什么是axios拦截器、为什么要使用axios拦截器？

在vue项目中，我们通常使用axios与后台进行数据交互，axios是一款基于promise封装的库，可以运行在浏览器端和node环境中。

二、axios特性

1、拦截请求和响应
2、取消请求
3、转换json
4、客户端防御XSRF等。

三、使用拦截器的原因

若出现请求数多的情况下，我们将会用到 axios 的一个API：拦截器。
页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，
如果每个请求都附带后端返回的token，我们需要在拿到response之前loading动画的展示等。

四、拦截器的分类

拦截器分为请求（request）拦截器和响应（response）拦截器。

五、request拦截器

axios.interceptors.request.use(function (config) {console.log(config.url);config.headers.mytoken = "nihao";return config;},function (err) {console.log(err);}
);

六、response拦截器

axios.interceptors.response.use(function (res) {// console.log(res)var data = res.data;return data;},function (err) {console.log(err);}
);

七、如果你想在稍后移除拦截器，可以这样：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/
});
axios.interceptors.request.eject(myInterceptor);

八、可以为自定义 axios 实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/
});

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

axios系列之拦截器相关推荐

给axios的请求拦截器中配置token
axios 1. 配置token 用户第一次登录系统时,服务器端会返回一个身份秘钥信息(token),表明当前用户有资格.权限访问服务器,客户端获取token之后,通过sessionStorage存储 ...
axios的实例拦截器和全局拦截器关系。
axios的实例拦截器配置不会继承axios全局的拦截器,也就是说axios的instance的拦截器配置时单独服务的,不会被全局拦截器影响.
Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
axios中的拦截器
Axios拦截器是什么? 对每一次的请求和响应进行拦截之后进行相应的处理. 请求拦截器,你可以在发送请求体之前在请求体里加上token,然后我们的调接口可以省略传token,然后避免了代码的重复. 响 ...
axios的响应拦截器
一.拦截器介绍: 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器请求拦截器: 在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
axios的响应拦截器 - 错误统一处理 / 获取数据繁琐
1. 问题登录时,填写错误的用户名密码,没有错误提示(没有进入catch分支) 获取ajax的返回结果比较麻烦:res.data.data.xxxx 2.解决登录失败不报错的问题 2.1 分析原因 ...
axios拦截器_78.1K 的 Axios 项目有哪些值得借鉴的地方
Axios 是一个基于 Promise 的 HTTP 客户端,同时支持浏览器和 Node.js 环境.它是一个优秀的 HTTP 客户端,被广泛地应用在大量的 Web 项目中. 由上图可知,Axios ...
借助axios的拦截器实现Vue.js中登陆状态校验的思路
在做Vue中的登陆校验时,思路应该是这样的:先确定一个路由页面是否需要登陆才能访问,如果需要,就需要用户登陆,如果不需要,用户直接可以访问. 那么,首先来说,后台系统中,不一定每一个页面都要进行登陆权 ...
5 拦截器拦截请求路由_手写简易版axios拦截器，实现微信小程序wx.request的封装与拦截...
前言: axios是一个功能强大的网络请求库,其中拦截器又是axios的精髓.在小程序的开发或者需要手动实现ajax的时候,没有实现对请求的拦截,开发的时候非常不方便,因此手写一个简易版的axios拦 ...

axios系列之拦截器

文章の目录