如何设计一个支持“令牌桶算法”的自适应前端 API 请求速率限制器
前端不适合做真正可靠的令牌桶限流，但可实现轻量级自适应客户端节流以优化体验和缓解后端压力；其核心是感知而非拦截，需依赖后端响应头（如X-RateLimit-Remaining）动态调整行为。
直接说结论：前端不适合做真正可靠的令牌桶限流，但可以加一层轻量级、带自适应反馈的客户端节流，用来改善用户体验和减轻后端压力。关键不是“拦住所有超额请求”，而是“让前端知道什么时候该停、停多久”。
为什么前端不能靠 NewLimiter 做真实限流
Go 的 golang.org/x/time/rate 或 go-rate 库里的 NewLimiter 是服务端设计——它依赖系统时钟精度、无竞态共享状态、可阻塞等待。浏览器里：
• 没有全局时钟同步（Date.now() 会被用户手动调快/慢）
• 没有跨 Tab / 跨进程的原子计数器
• Wait 这类阻塞调用在 JS 中根本不存在（会卡死 UI）
• 所有“桶”状态都存在内存里，刷新页面就清零，恶意用户删 localStorage 就绕过
所以你看到的「前端令牌桶」本质是「启发式节流 + 后端兜底」，不是真正的分布式限流。
AllowN 在前端怎么模拟才不误导自己
服务端 AllowN 返回布尔值 + 消费 token；前端没法真正“消费”，只能模拟判断逻辑：
立即学习“前端免费学习笔记（深入）”；
- 用
performance.now()替代time.Now()计算上次填充间隔 - 桶容量
b和速率r必须和服务端对齐（比如后端设为100 req/min，前端也按这个算） - 每次请求前，先计算当前应有 token 数：
min(b, prevTokens + r * (now - lastRefill) / 1000) - 如果 ≥1，就扣减 1 并更新
lastRefill；否则拒绝，并提示“请稍后再试”
⚠️ 容易踩的坑：
• 直接用 setTimeout 模拟“等 token 到位” → 用户切走再切回来，时间差导致误判
• 把 r 写成 10（每秒 10 个），但后端其实是 100 per minute → 前端放行太快，大量 429
如何让前端“感知”后端真实的限流状态
真正有用的自适应，不是前端自己猜，而是听后端说。关键看三个响应头：
-
X-RateLimit-Remaining：当前窗口剩余请求数（如97） -
X-RateLimit-Reset：窗口重置时间戳（Unix 秒，如1744685280） -
Retry-After：被限流时建议等待秒数（如60）
前端拿到后，应该：
• 立即更新本地 token 计数器（不要只靠自己算）
• 如果收到 429 + Retry-After，暂停所有同类请求至少该时长
• 把 X-RateLimit-Reset 转成本地倒计时，动态调整 UI 按钮状态（比如“重试”变灰，显示“X 秒后恢复”）
这比任何前端算法都准——因为它是后端 Redis 计数器的真实快照。
哪些场景必须放弃前端限流，直连后端中间件
以下情况，前端节流毫无意义，必须依赖网关或 API 层限流：
- 用户身份由 JWT 携带，但前端不校验签名（token 可伪造）
- 限流维度是
user_id或app_key，而这些信息只在后端鉴权后才可信 - 要支持“免费用户 100 次/天、付费用户 10000 次/天”这类差异化规则
- API 被爬虫或 Postman 直接调用（完全绕过你的前端 JS）
这时候前端唯一该做的事，是把 429 错误渲染得友好些，而不是试图“自己拦住”。真正起作用的永远是 Nginx limit_req、Kong 插件、或你自己的 Go 限流中间件。
复杂点在于：前端永远不知道自己看到的“桶”是不是最新状态，尤其在多标签页、PWA 离线缓存、Service Worker 干预等场景下，时间戳和计数器极易漂移。别把它当保险丝，当进度条用更现实。
