js实现axios限制请求队列
背景是：
在实际开发中，可能会遇到网络问题或者查询量比较大的情况，上一个请求还没有完成，用户就发起了下一个请求。
会造成什么情况呢？
但是同一个请求多次发送到服务器，无疑是对服务器的一种压力，所以需要在已经优化服务器过查询速度后，以及用户网络情况比较差的条件下，在前端进行请求限制。
axios 自带的cancelToken可以帮我们实现这个需求，并且提供给了我们一个现成的api axios.CancelToken ，这是一个返回值是带有请求信息的回调函数，我们可以在需要cancel的时候去执行这个回调函数。具体实现如下：
const service = axios.create({});
const penddingMap = new Map();
const addPendding = (config) => {
config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
if(!penddingMap.has(config.url)){
penddingMap.set(config.url,cancel);
}
})
}
const removePendding = (config) => {
if(penddingMap.has(config.url)){
let cancel = penddingMap.get(config.url);
cancel(config.url);
penddingMap.delete(config.url)
}
}
本地维护一个Map来存储每个请求信息， addPendding 中每次会去先判断是否有cancelToken，如果有就不用重新创建一个cancelToken。 removePendding 中判断请求信息是否在Map中，如果该请求存在于Map中，则执行cancel函数，并删除Map中的该请求。
拦截器中的具体应用：
service.interceptors.request.use(config => {
removePending(config) // 如果存在Map中先cancel该请求
addPendding(config) // 添加该请求到Map中
return config
})
service.interceptors.response.use(response => {
``` // some code
return response.data
}，error => {
// 捕获cancel请求并抛出
if(error instanceof Cancel){
error.message = '上一请求尚未结束，稍等~';
Message.error(error.message);
return Promise.reject(error.response)
// 这里抛出需要注意，在请求时调用try-catch进行捕获
})
)
这里拦截成功后，就可以限制住大流量的多次请求。
这里只是一个例子，也可以通过判断按钮逻辑来控制用户是否发起请求。
到此这篇关于js实现axios限制请求队列的文章就介绍到这了,更多相关js axios限制请求队列内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
