JavaScript网络请求_Axios拦截器与缓存机制_技术教程

使用Axios拦截器可统一管理请求与响应，结合内存缓存机制提升性能。通过请求拦截器添加认证、计算耗时，响应拦截器处理错误；利用Map存储缓存数据，基于URL和参数生成唯一键，支持缓存有效期与手动清除，避免重复请求，优化用户体验。

在现代前端开发中，网络请求是与后端交互的核心环节。Axios 作为一个基于 Promise 的 HTTP 客户端，因其简洁的 API 和强大的功能（如拦截器和可扩展性）被广泛使用。结合合理的缓存机制，可以显著提升应用性能和用户体验。本文将介绍如何使用 Axios 拦截器管理请求流程，并实现轻量级的缓存策略。

使用 Axios 拦截器统一处理请求与响应

Axios 提供了请求拦截器和响应拦截器，可以在请求发送前或响应返回后进行统一处理，例如添加认证头、处理错误、日志记录等。

请求拦截器示例：

常用于添加 token、设置默认参数或显示加载状态。

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。