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

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.xdnf.cn/news/16068.html

相关文章:

  • SpringBoot 使用Rabbitmq
  • EDoF-ToF: extended depth of field time-of-flight imaging解读, OE 2021
  • C语言常见的预定符号常量
  • LeetCode 热题100:160.相交链表
  • 神经网络和机器学习的一些基本概念
  • 【Node.js】使用ts-node运行ts文件时报错: TypeError: Unknown file extension “.ts“ for ts 文件
  • 电子设计大赛【摄像头循迹】讲解
  • SpringMVC快速入门之请求与响应
  • 【大模型文生图、文生音频实战Demo】基于Spring AI Alibaba和阿里百炼大模型实现文生图、文生视频
  • WebGIS 中常用公共插件
  • 1688 Agent Russia 丨俄罗斯1688跨境代采系统搭建指南
  • 前端开发 React 状态优化
  • 基于深度学习的图像分类:使用预训练模型进行迁移学习
  • 原创-基于 PHP 和 MySQL 的证书管理系统 第三版
  • Neo4j 框架 初步简单使用(基础增删改查)
  • Neo4j如何修改用户密码?
  • 【Java】Reflection反射(代理模式)
  • Redis能完全保证数据不丢失吗?
  • Spring Cloud Alibaba Sentinel 基本工作原理源码阅读
  • BQ4050RSMR DIOTEC高精度锂电池保护与电量监测芯片 集成保护+计量+通信
  • AWS Lambda IoT数据处理异常深度分析:从告警到根因的完整排查之路
  • 快手DHPS:国内首个实现基于RDMA 通信的可负载均衡高性能服务架构!
  • 设计汽车集群电源
  • 前端资源缓存优化案例:深入探讨 Nginx 配置中的 Cache-Control 头部叠加问题
  • 一次Oracle集群脑裂问题分析处理
  • 耐达讯自动化EtherCAT转RS232:示波器连接的“开挂秘籍”
  • pig cloud框架中引入websocket
  • Android Camera openCamera
  • Node.js 倒计时图片服务部署与 Nginx 反向代理实战总结
  • OneTwoVLA——基于π0实现类π0.5:一个模型中完成原来双系统下的慢思考、快执行,且具备自适应推理能力和自我纠错能力