前端遇到高并发如何解决重复请求

在前端开发中遇到高并发场景时，若不加控制容易出现重复请求，这可能导致接口压力增加、数据异常、用户体验变差等问题。以下是前端防止/解决重复请求的常见方法，按不同场景归类总结：

🌟 一、常见重复请求场景

🚀 二、常用解决方案

✅ 1. 禁用按钮防止多次点击

const [loading, setLoading] = useState(false);

const handleClick = async () => {
if (loading) return;
setLoading(true);
try {
await fetchData();

  } finally {
setLoading(false);

  }

};
<Button loading={loading} onClick={handleClick}>提交</Button>

✅ 2. 使用请求缓存 + Map 记录请求状态

原理：在请求发出前先检查是否已有相同请求在进行。

const requestCache = new Map();

const requestWithDeduplication = (url: string, options: any = {}) => {
if (requestCache.has(url)) {
return requestCache.get(url); // 复用已有请求

  }

const req = fetch(url, options).finally(() => {

    requestCache.delete(url); // 请求结束后清除缓存

  });


  requestCache.set(url, req);
return req;

};

适合统一封装 fetch、axios 请求，避免相同参数的并发请求。

✅ 3. 使用 Axios 的 CancelToken 取消上一次请求

let controller: AbortController | null = null;


const request = async (url: string) => {

  if (controller) {

    controller.abort(); // 取消上一个请求

  }
controller = new AbortController();


  try {

    const res = await fetch(url, { signal: controller.signal });

    return await res.json();

  } catch (e) {

    if (e.name === 'AbortError') {

      console.log('Request canceled');

    }

  }

};

适合搜索联想、快速切换 tab 等需要 只保留最后一次请求 的场景。

✅ 4. 使用 debounce/throttle 防抖节流

import { debounce } from 'lodash';

const fetchData = debounce((params) => {
// 实际请求

}, 300);

<input onChange={(e) => fetchData(e.target.value)} />

控制高频输入类请求频率，减少并发请求量。

✅ 5. 后端幂等 + 前端唯一请求 ID（可选高级方案）

• 
  
• 给每次请求生成唯一 ID（如 UUID），发送给后端。
  
• 后端对相同 ID 请求只处理一次。
  
• 前端避免再做复杂状态判断，适合交易、支付类场景。
  

🧠 小结对照表

如果你告诉我你遇到的具体是哪个页面或场景（例如点击下载、搜索联想、多 tab 切换等），我可以给出更加定制化的解决方案。