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.data
    return 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 刷新,或者引导用户重新登录。

相关推荐
初出茅庐的几秒前
hooks&&状态管理&&业务管理
前端·javascript·vue.js
三掌柜6664 分钟前
2025三掌柜赠书活动第三十五期 AI辅助React Web应用开发实践:基于React 19和GitHub Copilot
前端·人工智能·react.js
YH丶浩4 分钟前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
阿民_armin5 分钟前
Canvas 冷暖色分析工具
前端·javascript·vue.js
小岛前端6 分钟前
大小仅 1KB!超级好用!计算无敌!
前端·javascript·开源
没有鸡汤吃不下饭18 分钟前
Git将某个分支合并到开发(dev)、测试(test)后突然想撤销该分支的功能,怎么处理?
前端·git·github
文心快码BaiduComate18 分钟前
Comate分饰多角:全栈开发一个Python学习网站
前端·后端·python
90后的晨仔25 分钟前
Vue 插槽(Slots)全面解析与实战指南
前端·vue.js
我是日安29 分钟前
从零到一打造 Vue3 响应式系统 Day 20 - Reactive:reactive 极端案例
前端·vue.js
Slice_cy30 分钟前
📚 uniapp版本懒加载 + 不定高虚拟列表实现
前端