使用Axios拦截器可统一管理请求与响应，结合内存缓存机制提升性能。通过请求拦截器添加认证、计算耗时，响应拦截器处理错误；利用Map存储缓存数据，基于URL和参数生成唯一键，支持缓存有效期与手动清除，避免重复请求，优化用户体验。
在现代前端开发中，网络请求是与后端交互的核心环节。Axios 作为一个基于 Promise 的 HTTP 客户端，因其简洁的 API 和强大的功能（如拦截器和可扩展性）被广泛使用。结合合理的缓存机制，可以显著提升应用性能和用户体验。本文将介绍如何使用 Axios 拦截器管理请求流程，并实现轻量级的缓存策略。
使用 Axios 拦截器统一处理请求与响应
Axios 提供了请求拦截器和响应拦截器，可以在请求发送前或响应返回后进行统一处理，例如添加认证头、处理错误、日志记录等。
请求拦截器示例：
常用于添加 token、设置默认参数或显示加载状态。
立即学习“Java免费学习笔记（深入）”；
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('authToken');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
config.metadata = { startTime: new Date() };
return config;
},
error => {
return Promise.reject(error);
}
);
响应拦截器示例：
可用于统一处理 401 错误、计算请求耗时或格式化响应数据。
axios.interceptors.response.use(
response => {
const duration = new Date() - response.config.metadata.startTime;
console.log(`请求耗时: ${duration}ms`);
return response;
},
error => {
if (error.response?.status === 401) {
// 跳转登录页或刷新 token
window.location.href = '/login';
}
return Promise.reject(error);
}
);
实现简单的内存缓存机制
对于不常变化的数据（如配置项、地区列表），可以通过缓存避免重复请求，减少服务器压力并加快响应速度。
以下是一个基于 Map 的简单缓存实现：
const cache = new Map();// 缓存有效期（毫秒） const CACHE_TTL = 5 60 1000; // 5分钟
function isCacheValid(url) { const cached = cache.get(url); if (!cached) return false; return Date.now() - cached.timestamp < CACHE_TTL; }
// 请求拦截器检查缓存 axios.interceptors.request.use(config => { if (config.cache !== false && isCacheValid(config.url)) { // 手动抛出缓存响应，避免真实请求 return Promise.resolve({ data: cache.get(config.url).data, status: 200, statusText: 'OK', headers: {}, config: config, fromCache: true }); } return config; });
// 响应拦截器写入缓存 axios.interceptors.response.use(response => { const url = response.config.url; if (response.config.cache !== false) { cache.set(url, { data: response.data, timestamp: Date.now() }); } return response; });
使用时可通过设置 cache: false 跳过缓存：
axios.get('/api/config', { cache: false }); // 强制请求
axios.get('/api/region'); // 使用缓存
增强缓存控制：支持参数与手动清除
实际项目中 URL 可能带参数，需将参数纳入缓存键。可使用 URL 序列化或生成唯一键。
function generateCacheKey(url, params) {
const sortedParams = Object.keys(params || {})
.sort()
.map(k => `${k}=${params[k]}`)
.join('&');
return `${url}?${sortedParams}`;
}
更新缓存逻辑使用该 key：
// 在请求拦截器中
const key = generateCacheKey(config.url, config.params);
if (config.cache !== false && isCacheValid(key)) {
return Promise.resolve(/* 返回缓存数据 */);
}
// 在响应拦截器中
const key = generateCacheKey(response.config.url, response.config.params);
cache.set(key, { data: response.data, timestamp: Date.now() });
提供清除缓存方法：
function clearCache(urlPrefix) {
for (const key of cache.keys()) {
if (key.startsWith(urlPrefix)) {
cache.delete(key);
}
}
}
// 示例：清除用户相关缓存
clearCache('/api/user/');
基本上就这些。通过拦截器与缓存结合，既能统一处理请求逻辑，又能有效优化性能。实现时注意缓存粒度和生命周期，避免数据 stale。
