AXIOS 拦截器参数 axios拦截器是什么 | 您所在的位置:网站首页 › 如何使用axios做请求拦截和错误处理 › AXIOS 拦截器参数 axios拦截器是什么 |
一.拦截器介绍: 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器 请求拦截器: 在请求发送前进行必要操作处理,例如添加统一cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装响应拦截器: 响应拦截器也是如此功能,只是在请求得到响应之后,对响应体的一些处理,通常是数据统一处理等,也常来判断登录失效等// 请求拦截器 instance.interceptors.request.use(req=>{}, err=>{}); // 响应拦截器 instance.interceptors.reponse.use(req=>{}, err=>{});二.具体实列:当我们在logi你登录组件中调用登录接口 当我们输入正确的用户信息即可登录成功.如果输入错误的用户信息,能否进入图一的catch分支呢? 如上图所示,控制台有登录失败信息,但是并没有错误提示(未能进入catch分支) 三.解决登录失败不报错的问题原因分析: axios的内部报错机制: 如果请求出现网络错误,就会主动抛出错误如果请求得到的响应转态码不是2开头的,就会主动抛出错误结合上图控制台信息可知请求得到请求的状态码是正常的(但是:success字段是false),也没有网络错误, ,axios就没有主动抛出错误,也就无法进入catch分支 解决方法: 在src/utils/request.js中,补充请求拦截器如下: 这是我们在登录页面再错输入错误的用户信息时: 已经按照我们的设置显示出错误信息 四.小结:响应拦截器用来处理后端接口返回的数据---脱壳处理。判断某个操作是否成功,需要根据后端接口返回值中某个特殊字段(一般是由后端同学来约定)来判断,而不能只是依靠axios内置的报错机制 |
CopyRight 2018-2019 实验室设备网 版权所有 |