通过Axios拦截器可统一处理请求和响应，如添加认证头、处理401错误跳转登录页，并结合自定义实例封装提升代码可维护性。
Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 中发起网络请求。在实际开发中，我们经常需要统一处理请求和响应，以及网络异常或后端返回的错误信息。通过 Axios 提供的拦截器机制和完善的错误处理策略，可以有效提升代码的可维护性和用户体验。
使用拦截器统一处理请求与响应
拦截器允许我们在请求发送前或响应返回后进行一些通用操作，比如添加认证头、设置加载状态、日志记录等。
请求拦截器常用于添加身份验证 token、设置默认请求头、显示 loading 动画等：
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 可以在此处开启 loading
return config;
},
error => {
return Promise.reject(error);
}
);
响应拦截器
可用于统一处理响应数据、关闭 loading、处理特定状态码（如 401 未授权）：
立即学习“Java免费学习笔记（深入）”；
axios.interceptors.response.use(
response => {
// 直接返回响应数据，简化调用层处理
return response.data;
},
error => {
// 在此处统一处理错误
return Promise.reject(error);
}
);
全面的错误处理机制
Axios 的错误可能是网络问题、超时、服务器异常或业务逻辑错误。我们需要区分不同类型的错误并做出相应处理。
通过检查 error 对象的属性，可以识别错误来源：
- error.response：存在说明服务器已响应，但状态码不在 2xx 范围，例如 400、401、500
- error.request：存在但无响应，通常是网络中断或服务器无响应
- error.message 或配置问题，如超时、取消请求等
axios.interceptors.response.use(
response => {
return response.data;
},
error => {
if (error.response) {
// 服务器返回了错误状态码
switch (error.response.status) {
case 401:
// 通常表示登录过期，跳转到登录页
window.location.href = '/login';
break;
case 403:
alert('权限不足');
break;
case 500:
alert('服务器内部错误，请稍后再试');
break;
default:
alert(`请求失败：${error.response.data.message || '未知错误'}`);
}
} else if (error.request) {
// 网络异常，如断网、服务不可达
alert('网络连接失败，请检查网络');
} else {
// 其他错误，如设置请求时出错
console.error('请求配置异常:', error.message);
}
// 将错误继续抛出，便于调用层捕获
return Promise.reject(error);
}
);
实际使用中的建议
为了提高灵活性和复用性，建议将拦截器和实例封装在一起，避免污染全局 axios。
创建自定义实例：
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000
});
// 添加该实例的拦截器
api.interceptors.request.use( ... );
api.interceptors.response.use( ... );
export default api;
在组件中直接使用：
api.get('/user/profile')
.then(data => {
console.log(data);
})
.catch(err => {
// 仍可捕获特殊场景下的错误
});
基本上就这些。合理使用拦截器和错误处理，能让网络请求更健壮、代码更清晰。 
