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.常见应用场景

统一错误处理：在响应拦截器中统一处理 HTTP 错误，比如 404、500 错误，或者处理常见的业务错误。
响应数据格式化 ：比如你希望所有响应数据都以 { code, data, message } 的格式返回，响应拦截器可以帮助你进行格式化。
Token 过期处理 ：在拦截器中检查 401 Unauthorized 错误，当 token 过期时，你可以自动进行 token 刷新，或者引导用户重新登录。