vue3:七、拦截器实现

一、前言

拦截器可以很好的统一处理请求和响应

• ​请求拦截器：可以在请求发送之前对请求进行统一处理，比如添加认证信息（如 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的页面中接口为一个不存在的接口

打开页面，应该报错