摘要：在前端开发中遇到高并发场景时，若不加控制容易出现重复请求，这可能导致接口压力增加、数据异常、用户体验变差等问题。以下是前端防止/解决重复请求的常见方法，按不同场景归类总结：
在前端开发中遇到高并发场景时，若不加控制容易出现重复请求，这可能导致接口压力增加、数据异常、用户体验变差等问题。以下是前端防止/解决重复请求的常见方法，按不同场景归类总结：
const [loading, setLoading] = useState(false);const handleClick = async => {if (loading) return;setLoading(true);try {await fetchData;} finally {setLoading(false);}};提交原理：在请求发出前先检查是否已有相同请求在进行。
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 请求，避免相同参数的并发请求。
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 等需要 只保留最后一次请求 的场景。
import { debounce } from 'lodash';const fetchData = debounce((params) => {// 实际请求}, 300); fetchData(e.target.value)} />控制高频输入类请求频率，减少并发请求量。
如果你告诉我你遇到的具体是哪个页面或场景（例如点击下载、搜索联想、多 tab 切换等），我可以给出更加定制化的解决方案。
来源：小成顾事多
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
