AXIOS 拦截器参数 axios拦截器是什么 您所在的位置:网站首页 如何使用axios做请求拦截和错误处理 AXIOS 拦截器参数 axios拦截器是什么

AXIOS 拦截器参数 axios拦截器是什么

2023-06-21 19:42| 来源: 网络整理| 查看: 265

一.拦截器介绍:

一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器

请求拦截器: 在请求发送前进行必要操作处理,例如添加统一cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装响应拦截器:  响应拦截器也是如此功能,只是在请求得到响应之后,对响应体的一些处理,通常是数据统一处理等,也常来判断登录失效等// 请求拦截器 instance.interceptors.request.use(req=>{}, err=>{}); // 响应拦截器 instance.interceptors.reponse.use(req=>{}, err=>{});二.具体实列:

  当我们在logi你登录组件中调用登录接口

AXIOS 拦截器参数 axios拦截器是什么_AXIOS 拦截器参数

AXIOS 拦截器参数 axios拦截器是什么_vue.js_02

AXIOS 拦截器参数 axios拦截器是什么_拦截器_03

 当我们输入正确的用户信息即可登录成功.如果输入错误的用户信息,能否进入图一的catch分支呢?

AXIOS 拦截器参数 axios拦截器是什么_ios_04

 如上图所示,控制台有登录失败信息,但是并没有错误提示(未能进入catch分支)

三.解决登录失败不报错的问题

原因分析:

axios的内部报错机制:

如果请求出现网络错误,就会主动抛出错误如果请求得到的响应转态码不是2开头的,就会主动抛出错误 

结合上图控制台信息可知请求得到请求的状态码是正常的(但是:success字段是false),也没有网络错误, ,axios就没有主动抛出错误,也就无法进入catch分支

解决方法:

AXIOS 拦截器参数 axios拦截器是什么_拦截器_05

 在src/utils/request.js中,补充请求拦截器如下:

AXIOS 拦截器参数 axios拦截器是什么_拦截器_06

AXIOS 拦截器参数 axios拦截器是什么_vue.js_07

这是我们在登录页面再错输入错误的用户信息时:

AXIOS 拦截器参数 axios拦截器是什么_ajax_08

已经按照我们的设置显示出错误信息  

四.小结:响应拦截器用来处理后端接口返回的数据---脱壳处理。判断某个操作是否成功,需要根据后端接口返回值中某个特殊字段(一般是由后端同学来约定)来判断,而不能只是依靠axios内置的报错机制


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有