一.拦截器介绍:

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

• 请求拦截器: 在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装
• 响应拦截器:  响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等

// 请求拦截器
instance.interceptors.request.use(req=>{}, err=>{});
// 响应拦截器
instance.interceptors.reponse.use(req=>{}, err=>{});

二.具体实列:

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

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

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

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

原因分析:

axios的内部报错机制:

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

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

解决方法:

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

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

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

四.小结:

1. 响应拦截器用来处理后端接口返回的数据---脱壳处理。

2. 判断某个操作是否成功，需要根据后端接口返回值中某个特殊字段(一般是由后端同学来约定)来判断，而不能只是依靠axios内置的报错机制