当前位置: 首页 > news >正文

Axios 响应拦截器

1.定义:响应拦截器(Response Interceptor)是一个可以在 axios 接收到服务器响应后,响应数据交给 .then() 处理之前执行的函数。你可以用它来统一处理响应数据,进行错误处理,或者对返回的数据做格式化和转换等操作。

2.怎么使用axios响应拦截器

axios 中,响应拦截器是通过 axios.interceptors.response.use() 方法来添加的,而响应拦截器默认有俩个参数

第一个参数:响应成功时的回调函数。

第二个参数:响应失败时的回调函数(用来捕获错误,如网络错误、HTTP 错误等)。

成功回调函数

当请求成功并且响应状态码在 2xx 范围内时,这个函数会被调用。你可以在这里对响应数据进行处理,比如统一格式化数据、检查状态码等。

失败回调函数

当请求失败时(如网络错误、服务器错误、响应状态码不在 2xx 范围内等),失败回调函数会被触发。你可以在这里统一处理错误,比如显示错误消息,重试请求,或者记录日志等

axios.interceptors.response.use(function (response) {const result = response.datareturn result
}),//第一个参数,当请求成功的时候,调用该函数function (error) {if (error?.response?.status === 401) {alert('身份登录失败,请重新登陆')localStorage.clear()location.href = '../login/index.html'}return Promise.reject(error)
}//第二个参数,请求失败调用,并且弹窗

在响应返回的数据中response是 axios 返回的响应对象包含了响应的所有信息。我们经常会从中获取响应状态码来判断响应是否成功。

3. 移除拦截器

如果不再需要某个拦截器,可以通过 eject 方法将其移除。这样做的好处是可以灵活控制拦截器的生命周期,避免不必要的拦截操作。

// 获取拦截器的 ID
const interceptorId = axiosInstance.interceptors.response.use(responseHandler, errorHandler);// 移除拦截器
axiosInstance.interceptors.response.eject(interceptorId);

这个移除方法有点像定时器的移除方法

4.常见应用场景

  1. 统一错误处理:在响应拦截器中统一处理 HTTP 错误,比如 404、500 错误,或者处理常见的业务错误。

  2. 响应数据格式化:比如你希望所有响应数据都以 { code, data, message } 的格式返回,响应拦截器可以帮助你进行格式化。

  3. Token 过期处理:在拦截器中检查 401 Unauthorized 错误,当 token 过期时,你可以自动进行 token 刷新,或者引导用户重新登录。

http://www.dtcms.com/a/294255.html

相关文章:

  • dfaews
  • vue3笔记(2)自用
  • 设备虚拟化技术
  • 筛选数据-group_concat
  • Go语言实现对象存储——下载任意图片,保存到阿里云存储,并将URL保存到数据库。
  • 【数据库】国产数据库的新机遇:电科金仓以融合技术同步全球竞争
  • Pycaita二次开发基础代码解析:图层管理、基准控制与特征解析深度剖析
  • lwIP学习记录5——裸机lwIP工程学习后的总结
  • 【C++】类和对象(中)构造函数、析构函数
  • 海信IP501H-IP502h_GK6323处理器-原机安卓9专用-优盘卡刷固件包
  • ZLMediaKit流媒体服务器WebRTC页面显示:使用docker部署
  • Android多开实现方案深度分析
  • Android13重置锁屏(2)
  • 论文略读:Knowledge is a Region in Weight Space for Finetuned Language Models
  • springboot集成LangChain4j
  • 世博会无法在Android上启动项目:无法连接到TCP端口5554:连接被拒绝
  • 2025暑期—05神经网络-BP网络
  • PyCharm配置python软件安装步骤(附安装包)PyCharm 2025 超详细下载安装教程
  • 【CNN】LeNet网络架构
  • 盟接之桥说制造:浅谈“客供共生关系”:构建能力闭环,实现价值共赢
  • 论文笔记:On the Biology of a Large Language Model
  • Java 高频算法
  • Python通关秘籍(七)数据结构——集合
  • mysql什么时候用char,varchar,text,longtext
  • Git 完全手册:从入门到团队协作实战(4)
  • 经典神经网络之LetNet
  • 【前沿技术动态】【AI总结】RustFS:从 0 到 1 打造下一代分布式对象存储
  • Java 时间处理 API 全解析:从 JDK7 到 JDK8 的演进
  • 有序数组中出现次数超过25%的元素
  • 数字人形象视频:开启虚拟世界的全新篇章