axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”

javascript 复制代码
import axios from "axios";

// 1. 缓存已完成的请求结果(key:请求URL+参数,value:数据)
const requestCache = new Map();
// 2. 记录正在执行的请求(避免并行重复请求)
const pendingRequests = new Set();

// 请求拦截器:发起请求前检查
axios.interceptors.request.use(config => {
  // 生成请求唯一标识(URL + 方法 + 参数)
  const requestKey = `${config.url}-${config.method}-${JSON.stringify(config.params)}`;

  // 情况1:请求正在执行中,拦截新请求
  if (pendingRequests.has(requestKey)) {
    return Promise.reject(new Error("当前请求已在执行,请勿重复触发"));
  }

  // 情况2:请求已缓存,直接返回缓存数据(不发新请求)
  if (requestCache.has(requestKey)) {
    return Promise.resolve({ data: requestCache.get(requestKey) });
  }

  // 情况3:新请求,加入"正在执行"列表
  pendingRequests.add(requestKey);
  return config;
});

// 响应拦截器:请求完成后更新缓存/状态
axios.interceptors.response.use(
  response => {
    const requestKey = `${response.config.url}-${response.config.method}-${JSON.stringify(response.config.params)}`;
    // 1. 缓存请求结果
    requestCache.set(requestKey, response.data);
    // 2. 从"正在执行"列表移除
    pendingRequests.delete(requestKey);
    return response;
  },
  error => {
    // 错误时也移除"正在执行"状态
    const requestKey = `${error.config.url}-${error.config.method}-${JSON.stringify(error.config.params)}`;
    pendingRequests.delete(requestKey);
    return Promise.reject(error);
  }
);

// 调用示例:相同参数的请求,短时间内只发一次
function fetchStyle() {
  axios.get("/api/page-style", { params: { theme: "light" } })
    .then(res => console.log("样式数据(缓存/新请求):", res.data))
    .catch(err => console.log("请求拦截:", err.message));
}

// 1秒内调用3次,只发1次请求,后2次用缓存
fetchStyle();
setTimeout(fetchStyle, 500);
setTimeout(fetchStyle, 800);

这个地方的set和map使用,为什么不用对象和数组?

  1. 用普通对象 {} 替代 Map:
    可行,但键只能是字符串 / Symbol,且判断键是否存在需要用 obj.hasOwnProperty(key)(不如 map.has(key) 直观)。
  2. 用数组 [] 替代 Set:
    可行,但检查是否存在需要 array.includes(key)(O (n) 复杂度,数据量大时效率低),且需要手动去重(if (!array.includes(key)) array.push(key))。
相关推荐
aesthetician9 分钟前
clsx:高效处理 React 条件类名的实用工具
前端·react.js·前端框架
粉末的沉淀16 分钟前
css:固定跨度间隔的渐变色设置
前端·css
阿正的梦工坊17 分钟前
Mac电脑解决 npm 和 Yarn 安装时的证书过期问题
前端·macos·npm
2503_928411563 小时前
9.26 数据可视化
前端·javascript·信息可视化·html5
我叫唧唧波3 小时前
【打包工具】webpack基础
前端·webpack
知识分享小能手5 小时前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
PineappleCoder8 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
Mr.Aholic9 小时前
Java系列知识之 ~ Spring 与 Spring Boot 常用注解对比说明
java·spring boot·spring
EveryPossible9 小时前
展示内容框
前端·javascript·css
伊织code9 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat