一、前言
拦截器可以很好的统一处理请求和响应
- 请求拦截器：可以在请求发送之前对请求进行统一处理，比如添加认证信息（如 token）、设置请求头、添加公共参数等。
- 响应拦截器：可以在响应返回之后对响应数据进行统一处理，比如处理错误、格式化数据、统一处理状态码等。
二、官网参考
拦截器 | Axios中文文档 | Axios中文网
https://www.axios-http.cn/docs/interceptors
三、实现
1、复制官网给的示例
2、粘贴到项目的request.js中
3、修改信息
根据官网信息可知，我们可以给自定义的axios实例添加拦截器，这里我们已经有实例request，所以需要将这里的axios替换成request
修改完成效果
4、在请求拦截器中加入token
根据在请求拦截器中输出config可知config的相关信息
由于token是加在header中的
这里在config下的header下加入token的数值为获取的token
5、在响应拦截器中处理返回信息
有响应和错误响应两部分
响应错误
①错误代码401
登录过期，此时应该需要清除token，并且刷新页面
测试：
App.vue的get请求传递一个参数info=testget
apifox中建立一个新期望
增加参数info等于'testget'时，状态码设置为401
这里还需要将之前设置的成功状态修改一下
增加参数info不等于'testget'
去页面查看是否出现提示信息
**注:**这里会出现一直刷新的情况：一直在App.vue页面，刷新之后还是回到这个页面，所以出现了死循环，但实际请求不是在App.vue进行的，所以不需要处理，只需要删掉请求就行
②错误代码403
权限问题，导致的错误
测试：可以参照401错误代码进行
get请求
新建期望
修改成功返回的状态
检查是否存在错误提示
③错误代码404
接口问题导致
测试：
修改App.vue的页面中接口为一个不存在的接口
打开页面，应该报错
