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的页面中接口为一个不存在的接口

打开页面,应该报错

相关推荐
驭风少年君6 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说7 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友7 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行7 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安8 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-8 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada8 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚8 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
黑云压城After8 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好18 小时前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式