不到50行代码实现一个能对请求并发数作限制的通用RequestDecorator

使用场景

在开发中，咱们可能会遇到一些对异步请求数作并发量限制的场景，好比说微信小程序的request并发最多为5个，又或者咱们须要作一些批量处理的工做，但是咱们又不想同时对服务器发出太多请求（可能会对服务器形成比较大的压力）。这个时候咱们就能够对请求并发数进行限制，而且使用排队机制让请求有序的发送出去。

介绍

那么，接下来咱们就来说一下如何实现一个通用的能对请求并发数进行限制的RequestDecorator。咱们先来介绍一下它的功能：

1. 既然涉及到并发数限制，它就确定容许用户传入最大并发数限制参数:maxLimit
2. 既然是一个通用的RequestDecorator,那么它应该容许使用者传入其喜欢的异步api(好比ajax, fetch, axios等)。
3. 为了方便起见，也为了开发便利性，被RequestDecorator封装后的request请求结果都返回一个promise。
4. 因为使用者传入的异步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;
  }
  // 发起请求api
  async 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就已经实现了。固然，这里还有不少能够继续增长的功能点，好比

1. 容许使用者设置每一个请求的retry次数。
2. 容许使用者对每一个请求设置缓存处理。

优势：

1. 不修改用户原来的request api代码。对原有代码无反作用。
2. 不修改request api的调用方式。用户能够无缝的使用被RequestDecorator封装过的request。
3. 可扩展，后续可能不止支持并发量限制，还可能增长缓存、retry等额外的功能。

结语

以上，就是本篇的所有内容。github仓库地址点击这里。欢迎你们点赞或者star下。若是你们有兴趣的话，也能够一块儿来完善这个东西。这个项目还不成熟，可能还会有bug，欢迎你们在github上提issue帮助我完善它。若是以为有帮助的话，麻烦点个赞哦，谢谢。

本文地址在->本人博客地址, 欢迎给个 start 或 follow