提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
背景
前端开发时常遇到用户恶意高频率提交请求接口,如点击查询,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",
},
});
}