Vue 3 请求拦截器可通过节流、时间窗口计数或响应头协同实现客户端限流，但仅为体验优化，关键限流必须由服务端强制执行。

Vue 3 中请求拦截器本身不直接提供限流能力，但可以结合节流（throttle）或令牌桶/滑动窗口等策略，在请求拦截器中做前置判断，实现客户端请求频率控制。关键不是“拦截器内置限流”，而是“在拦截器里插入限流逻辑”。

用节流函数控制单位时间最大请求数

适合简单场景，比如防止用户快速连点按钮触发多个相同请求。

• 引入轻量节流工具（如 Lodash 的 throttle），或手写简易版本
• 为每个接口 URL + 方法组合维护一个节流函数实例（避免全局锁死所有请求）
• 在请求拦截器中检查：若该请求已被节流拒绝，就直接 return Promise.reject() 并提示用户
• 示例逻辑：

  const throttleMap = new Map<string, Function>()<br>request.interceptors.request.use(config => {<br>  const key = `${config.method}_${config.url}`<br>  const throttled = throttleMap.get(key) || throttle(() => {}, 1000, { leading: true, trailing: false })<br>  throttleMap.set(key, throttled)<br>  if (!throttled()) {<br>    return Promise.reject(new Error('请求过于频繁，请稍后再试'))<br>  }<br>  return config<br>})

用时间窗口计数器实现每秒 N 次限制

更贴近后端限流语义，适合对敏感操作（如发送验证码、提交表单）做强约束。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 维护一个 Map，记录每个接口的「最近请求时间戳数组」
• 每次请求前，清理超时（如 1s 内）的旧记录，再判断剩余数量是否已达上限
• 未超限则存入当前时间戳，放行；否则拒绝
• 注意：该方式只限客户端，不能替代服务端限流，仅作体验优化和基础防护

与服务端配合做令牌桶同步限流

若后端已返回限流状态（如响应头 X-RateLimit-Remaining: 0 或状态码 429），可在响应拦截器中缓存该状态，并在请求拦截器中临时拦截同类请求。

立即学习“前端免费学习笔记（深入）”；

• 响应拦截器收到 429 时，记录接口 URL 和冷却截止时间（如 Date.now() + 60_000）
• 请求拦截器发出前检查：若该接口处于冷却期，直接拒绝并提示
• 可搭配 localStorage 持久化冷却状态，避免刷新丢失

注意事项

客户端限流本质是“友好提示+体验优化”，不可用于安全边界控制。所有关键频次限制必须由服务端强制执行。

• 不要依赖时间戳绝对精确，用 Date.now() 即可，无需同步服务器时间
• 避免全局共享计数器，按接口维度隔离，防止 A 接口被 B 接口拖累
• 限流被拒时，建议统一抛出特定错误类型（如 new Error('RATE_LIMIT_EXCEEDED')），方便组件层捕获处理
• 测试时注意清除 localStorage 和内存 Map，避免残留状态干扰