能否用Axios请求拦截器以本地存储数据替代API请求？

你完全可以通过请求拦截器实现本地缓存逻辑，跳过实际API请求直接返回本地存储的数据，这不属于误用拦截器，反而属于拦截器的典型应用场景——请求级缓存。

实现思路 #

OpenAPIClientAxios生成的客户端本质基于Axios，而Axios的请求拦截器支持返回一个已resolve的Promise：当拦截器返回这类Promise时，Axios会直接跳过后续的请求发送流程，把Promise的结果当作响应数据传入后续的响应拦截器或业务逻辑。

代码示例 #

client.interceptors.request.use((config) => {
  // 自定义缓存键，可根据请求URL、参数等生成唯一标识
  const cacheKey = `api_cache_${config.url}_${JSON.stringify(config.params)}`;
  const cachedRawData = localStorage.getItem(cacheKey);

  if (cachedRawData) {
    // 把本地数据包装成Axios标准响应格式
    return Promise.resolve({
      data: JSON.parse(cachedRawData),
      status: 200,
      statusText: 'OK',
      headers: {},
      config: config
    });
  }

  // 无缓存时继续执行原请求流程
  return config;
});

注意事项 #

• 响应格式要合规：必须返回符合Axios响应结构的对象（包含data、status等核心字段），否则后续的响应拦截器或业务代码可能抛出格式错误。
• 精准控制缓存范围：建议只对GET等幂等请求做缓存，避免拦截POST/PUT等会修改服务器数据的请求，防止数据不一致。
• 缓存失效机制：如果需要更新缓存，可在响应拦截器中同步更新localStorage的数据，或者给缓存数据添加过期时间，在拦截器中判断是否过期。

内容的提问来源于stack exchange，提问作者Aaron Parisi