家具网站建设案例,WordPress小工具吗美化,动易网站模板免费,国内国际新闻最新消息10条使用场景
在开发中#xff0c;我们可能会遇到一些对异步请求数做并发量限制的场景#xff0c;比如说微信小程序的request并发最多为5个#xff0c;又或者我们需要做一些批量处理的工作#xff0c;可是我们又不想同时对服务器发出太多请求#xff08;可能会对服务器造成比…使用场景
在开发中我们可能会遇到一些对异步请求数做并发量限制的场景比如说微信小程序的request并发最多为5个又或者我们需要做一些批量处理的工作可是我们又不想同时对服务器发出太多请求可能会对服务器造成比较大的压力。这个时候我们就可以对请求并发数进行限制并且使用排队机制让请求有序的发送出去。
介绍
那么接下来我们就来讲一下如何实现一个通用的能对请求并发数进行限制的RequestDecorator。我们先来介绍一下它的功能
既然涉及到并发数限制它就肯定允许用户传入最大并发数限制参数:maxLimit既然是一个通用的RequestDecorator,那么它应该允许使用者传入其喜欢的异步api(比如ajax, fetch, axios等)。为了方便起见也为了开发便利性被RequestDecorator封装后的request请求结果都返回一个promise。由于使用者传入的异步api不一定是promise类型的也可能是callback类型的因此我们提供用户一个needChange2Promise参数使用者若传入的是callback类型的api它可以通过将这个参数设置为true来将callback类型转化为promise类型。
分析完功能后接下来我们就来实现这个东西
实现
具体代码如下每一步我基本都做了注释相信大家能看懂。
const pify require(pify);class RequestDecorator {constructor ({maxLimit 5,requestApi,needChange2Promise,}) {// 最大并发量this.maxLimit maxLimit;// 请求队列,若当前请求并发量已经超过maxLimit,则将该请求加入到请求队列中this.requestQueue [];// 当前并发量数目this.currentConcurrent 0;// 使用者定义的请求api若用户传入needChange2Promise为true,则将用户的callback类api使用pify这个库将其转化为promise类的。this.requestApi needChange2Promise ? pify(requestApi) : requestApi;}// 发起请求apiasync request(...args) {// 若当前请求数并发量超过最大并发量限制则将其阻断在这里。// startBlocking会返回一个promise并将该promise的resolve函数放在this.requestQueue队列里。这样的话除非这个promise被resolve,否则不会继续向下执行。// 当之前发出的请求结果回来/请求失败的时候则将当前并发量-1,并且调用this.next函数执行队列中的请求// 当调用next函数的时候会从this.requestQueue队列里取出队首的resolve函数并且执行。这样对应的请求则可以继续向下执行。if (this.currentConcurrent this.maxLimit) {await this.startBlocking();}try {this.currentConcurrent ;const result await this.requestApi(...args);return Promise.resolve(result);} catch (err) {return Promise.reject(err);} finally {console.log(当前并发数:, this.currentConcurrent);this.currentConcurrent--;this.next();}}// 新建一个promise,并且将该reolsve函数放入到requestQueue队列里。// 当调用next函数的时候会从队列里取出一个resolve函数并执行。startBlocking() {let _resolve;let promise2 new Promise((resolve, reject) _resolve resolve);this.requestQueue.push(_resolve);return promise2;}// 从请求队列里取出队首的resolve并执行。next() {if (this.requestQueue.length 0) return;const _resolve this.requestQueue.shift();_resolve();}
}module.exports RequestDecorator;样例代码如下
const RequestDecorator require(../src/index.js)// 一个callback类型的请求api
function delay(num, time, cb) {setTimeout(() {cb(null, num);}, time);
}// 通过maxLimit设置并发量限制needChange2Promise将callback类型的请求api转化为promise类型的。
const requestInstance new RequestDecorator({maxLimit: 5,requestApi: delay,needChange2Promise: true,
});let promises [];
for (let i 0; i 30; i ) {// 接下来你就可以像原来使用你的api那样使用它,参数和原来的是一样的promises.push(requestInstance.request(i, Math.random() * 3000).then(result console.log(result, result), error console.log(error)));
}
async function test() {await Promise.all(promises);
}test();这样一个能对请求并发数做限制的通用RequestDecorator就已经实现了。当然这里还有很多可以继续增加的功能点比如
允许使用者设置每个请求的retry次数。允许使用者对每个请求设置缓存处理。
优点
不修改用户原来的request api代码。对原有代码无副作用。不修改request api的调用方式。用户可以无缝的使用被RequestDecorator封装过的request。可扩展后续可能不止支持并发量限制还可能增加缓存、retry等额外的功能。
结语
以上就是本篇的全部内容。github仓库地址点击这里。欢迎大家点赞或者star下。如果大家有兴趣的话也可以一起来完善这个东西。这个项目还不成熟可能还会有bug欢迎大家在github上提issue帮助我完善它。如果觉得有帮助的话麻烦点个赞哦谢谢。 本文地址在-本人博客地址, 欢迎给个 start 或 follow
