前端取消重复请求并缓存接口数据

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

背景

前端开发时常遇到用户恶意高频率提交请求接口，如点击查询，1s内请求多次查询接口，这样的请求对前后端实际业务来说没有任何功能反馈，徒增了接口带宽压力。

需要在接口请求方法中封装在一定时间内取消重复请求的工具函数，使用fetch或axios库都可以实现取消重复请求的操作，但在network中还是有用户感知的接口cancel显示。为此使用Map方式缓存接口，在相同请求再次进来时使用上一次的缓存数据，就不再去调用接口了。

---

一、示例

class fetchApi {
	constructor(time) {
		this.limitTime = time || 1000;
		this.fetchCache = new Map();
		this.dataCache = new Map();
	}
	request(url, options) {
		let curFetch = this.fetchCache.get(url);
		//有相同的url请求，并且没有超过限定时间，则直接返回
		if (curFetch && new Date().getTime() - curFetch < this.limitTime) {
			console.warn("请求过于频繁!!!");
			return this.dataCache.get(url) || null;
		} else {
			this.fetchCache.set(url, new Date().getTime());
		}
		return fetch(url, options)
			.then((response) => {
				let resultData = response.json();
				this.dataCache.set(url, resultData); //缓存接口数据，给下次重复请求使用
				this.fetchCache.delete(url); //本次已经请求完成，删除缓存
				return resultData;
			})
			.catch((error) => {
				this.fetchCache.delete(url);
				console.error("请求失败", error);
			});
	}
}
const fetchApiInstance = new fetchApi(2000);

for (let index = 0; index < 10; index++) {
	fetchApiInstance.request("/api/user/info", {
		method: "POST",
		headers: {
			Accept: "application/json",
			"Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
		},
	});
}