Axios拦截器：统一处理请求和响应

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

Axios拦截器允许你在请求发送之前或响应接收之后对其进行修改或拦截处理。这使得开发者可以在全局范围内统一处理请求和响应，比如添加认证头、处理错误状态码、转换响应数据格式等。

Axios拦截器的类型

Axios提供了两种类型的拦截器：

1. 请求拦截器：在请求发送到服务器之前拦截请求，允许修改请求配置。
2. 响应拦截器：在接收到服务器响应后拦截响应，允许修改响应数据。

如何使用Axios拦截器

1. 请求拦截器

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么，例如添加认证头
config.headers.Authorization = `Bearer ${getToken()}`;
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});

2. 响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做点什么，例如统一处理状态码
if (response.status === 200) {
return response.data;
} else {
// 处理非200状态码的情况
}
return response;
}, error => {
// 对响应错误做点什么，例如处理网络错误或服务器返回的错误状态码
if (error.response) {
// 服务器响应的状态码不在2xx范围内
} else if (error.request) {
// 请求已发出，但没有收到响应
} else {
// 其他错误
}
return Promise.reject(error);
});

拦截器的应用场景

• 认证：在请求头中自动添加JWT或其他认证令牌。
• 错误处理：统一处理API返回的错误状态码，如401未授权、404未找到等。
• 数据转换：自动转换响应数据的格式，如将JSON转换为其他格式。
• 请求取消：在某些条件下取消请求，如用户退出登录时取消所有未完成的请求。

注意事项

• 拦截器中的错误处理应该谨慎进行，确保不会因为拦截器的错误影响到其他的请求。
• 拦截器的执行顺序是按照它们被添加的顺序，先添加的拦截器会先执行。

结论

Axios拦截器是一个强大的功能，它可以帮助开发者以一种更加优雅和集中化的方式处理HTTP请求和响应。通过合理使用拦截器，可以大大提高应用的可维护性和用户体验。