当前位置: 首页 > 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.lryc.cn/news/596968.html

相关文章:

  • AI 搜索引擎:让信息“长脑子”而不是“堆数据”
  • 【Spring Cloud Gateway 实战系列】基础篇:路由、断言、过滤器、负载均衡深度解析
  • 【服务器】 MCTP Over PCIe 的内容、用途、工作原理及硬件设计注意事项
  • 基于php的校园招聘平台
  • SpringCloudGateWay 使用nacos网关自动负载均衡
  • 二分查找-162.寻找峰值-力扣(LeetCode)
  • 思路探索:当大型语言模型遇见数据分析的现实挑战
  • 统一服务入口——Spring Cloud Gateway
  • 高亮匹配关键词样式highLightMatchString、replaceHTMLChar
  • Effective Python 第15条 不要过分依赖给字典添加条目时所用的顺序
  • CodeBuddy IDE实战:用AI全栈能力快速搭建课程表网页
  • JavaScript HTTP 请求:从老古董到新潮流
  • 在线深凹槽深检测方法都有哪些 —— 激光频率梳 3D 轮廓检测
  • 如何在Pico等Android头显中实现无人机低延迟RTMP全景巡检画面播放
  • 2025年7月份实时最新获取地图边界数据方法,省市区县街道多级联动【文末附实时geoJson数据下载】
  • 从零开始学习Dify-Excel数据可视化(四)
  • 无人机光伏巡检误检率↓78%!陌讯多模态融合算法实战解析
  • 【Android】用 ViewPager2 + Fragment + TabLayout 实现标签页切换
  • Android用户鉴权实现方案深度分析
  • react18更新哪些东西
  • Nginx和Apache的区别
  • Apache PDFBox深入实践
  • Apache JMeter 使用记录踩坑
  • MCP客户端架构与实施
  • Apache POI 介绍与使用指南
  • apache-doris安装兼datax-web配置
  • LNMP-zblog分布式部署
  • 【Unity Shader】Special Effects(十二)Glow 外发光(UI)
  • Unity × RTMP × 头显设备:打造沉浸式工业远控视频系统的完整方案
  • 如何在macOS上修改iPhone的定位