Axios全局拦截器应通过自定义实例配置：1. 创建apiClient实例并设置baseURL等；2. 请求拦截器自动注入token、添加元数据；3. 响应拦截器统一处理成功响应、401跳转登录、网络错误等；4. 拦截器通常启动时注册，无需手动清理。
在 Axios 中配置全局请求与响应拦截器，核心是通过 axios.interceptors 在创建实例后统一添加，通常推荐在封装 axios 实例时完成，避免在多个地方重复设置。
1. 创建并配置 axios 实例
不要直接在 axios 默认实例上加拦截器（除非明确需要全局生效且无多实例场景），更推荐新建一个自定义实例，便于管理、复用和隔离配置：
import axios from 'axios';
<p>const apiClient = axios.create({
baseURL: '<a href="https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39">https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39</a>',
timeout: 10000,
});
2. 添加请求拦截器（处理发出去的请求）
常用于自动携带 token、添加 loading 状态、统一参数处理等：
- 使用
apiClient.interceptors.request.use()注册 - 第一个函数接收 config，可修改后返回；第二个函数处理请求错误（如网络异常、取消请求）
- 示例：从 localStorage 读取 token 并注入 Authorization 头
apiClient.interceptors.request.use(
(config) => {
const token = localStorage.getItem('access_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 可选：添加请求标识，便于调试或取消
config.metadata = { startTime: Date.now() };
return config;
},
(error) => {
// 请求发出前就出错（例如网络未连接、请求被 cancel）
console.error('Request setup error:', error);
return Promise.reject(error);
}
);
3. 添加响应拦截器（处理返回的响应）
常用于统一错误处理、自动刷新 token、响应数据解包、埋点统计等：
立即学习“Java免费学习笔记（深入）”；
- 使用
apiClient.interceptors.response.use()注册 - 第一个函数接收 response，可加工 data 后返回；第二个函数处理响应失败（状态码非 2xx、网络错误、超时等）
- 注意：401/403 等业务错误仍会进入 success 回调，需根据 response.data.code 判断
apiClient.interceptors.response.use(
(response) => {
// 假设后端统一结构：{ code: 0, data: ..., message: '' }
const { code, data, message } = response.data;
if (code === 0) {
return data; // 直接返回业务数据，组件里不用再写 .data
} else if (code === 401) {
// 清除登录态，跳转登录页
localStorage.removeItem('access_token');
window.location.href = '/login';
return Promise.reject(new Error('Login expired'));
} else {
return Promise.reject(new Error(message || 'Request failed'));
}
},
(error) => {
// 网络错误、超时、服务不可用、CORS 等
if (error.code === 'ECONNABORTED') {
console.error('Request timeout');
} else if (!error.response) {
console.error('Network error or server unreachable');
}
return Promise.reject(error);
}
);
4. 拦截器的清理（按需）
如果拦截器只在特定模块/生命周期中生效（比如某个页面需要临时修改行为），可用 use 返回的 id 手动移除：
const requestInterceptor = apiClient.interceptors.request.use(/* ... */); // 后续可移除 apiClient.interceptors.request.eject(requestInterceptor);
但大多数项目中，全局拦截器在应用启动时注册一次即可，无需手动清理。
