Promise 的并发控制源码解析

前言

Promise 的并发控制源码解析，一看就是老面试题了

正文

一般我们讲到 Promise 的并发控制，很多时候我们都是和 HTTP 请求结合起来的

因为浏览器是有连接数量限制的，过多的 HTTP 请求会先挂起，等待先前发送的请求完毕之后再发送挂起的请求

每个请求都需要占用额外的内存，过多的 HTTP 请求挂起还可能导致浏览器崩溃

所以，合理的发送速度就显得格外的重要

这次，我们来品一品 async-pool 这个库的源代码，它的源代码，非常的简洁，如下

async function* asyncPool(concurrency, iterable, iteratorFn) {
  const executing = new Set();
  // 消费其中一个 Promise ，并从 executing 中删除该完成的 Promise
  async function consume() {
    const [promise, value] = await Promise.race(executing);
    executing.delete(promise);
    return value;
  }
  for (const item of iterable) {
    const promise = (async () => await iteratorFn(item, iterable))().then(
      value => [promise, value]
    );
    executing.add(promise);
    if (executing.size >= concurrency) {
      yield await consume();
    }
  }
  while (executing.size) {
    yield await consume();
  }
}

module.exports = asyncPool;

这里面核心的地方有三个，其一个是 Promise.race 这个 api

其二是 for 循环中的根据 executing.size >= concurrency 判断来 consume 掉已完成的 Promise

其三是如果“池子中” Promise 没有达到上限，则需要依次 consume ，此时和限流就无关了

Promise.race 下，如果某个 Promise 已完成或失败，那么返回的 Promise 就会对应的完成或者失败

对应到代理里面的 consume 函数，即每次我们都从 executing 中取一个已完成 Promise ，然后把该 Promise 从 executing 中删除，这样下一次调用 consume 就会继续

在 for 循环中，我们可以发现对传入的 Promise， 对其返回的结果也进行了包装

for (const item of iterable) {
  const promise = (async () => await iteratorFn(item, iterable))().then(
    value => [promise, value]
  );
  // ...
}

这里是为了记住当前的 Promise 对象，这样在 consume 函数中，我们就能删除这个把这个已完成的 Promise 从 executing 中删除

对于最后的 while 循环，当“池子”中的 Promise 数量已经小于我们指定的数量时，那么可以明确 for 内部的 yield await consume() 就不会执行到

但是剩下的 Promise 我们又不能不去 consume 进而获取结果（因为这个 asyncPool 这个函数是要获取结果返回的）

所以最后我们需要把“池子”里的 Promise 都 consume 掉，这样传入的所有 Promise 都能正确的被返回

当然，这里使用的是比较新的语法，比如 async/await 关键字，以及生成器函数

回到使用上，官方给了我们一个小例子，如下

可以发现，它的传参是根据参数不同来生成不同的 Promise 的，但实际上，生成的 Promise 并不是这么简单的

更多的时候，我们需要更加灵活的参数，比如下面的调用

myAsyncPool(
  // 指定最大并发个数
  3,
  // 每个异步的工厂函数
  [
    () => axios.get("/abc"),
    () => axios.delete("/a")
  ]
)

为了达成上面的效果，我们可以对源代码进行简单地修改，修改后如下

这里用了点 ts 泛型，整体大框架和源码保持不变

export async function* asyncPool<T>(
  concurrency: number,
  iterable: Iterable<() => Promise<T>>
) {
  type WrapperPromise = Promise<[WrapperPromise, T]>;
  const executing = new Set<WrapperPromise>();
  async function consume() {
    const [promise, value] = await Promise.race(executing);
    executing.delete(promise);
    return value;
  }
  for (const item of iterable) {
    const promise = item().then((val) => [promise, val]) as WrapperPromise;
    executing.add(promise);
    if (executing.size >= concurrency) {
      yield await consume();
    }
  }
  while (executing.size) {
    yield await consume();
  }
}

看起来很不错，不过这还是不够灵活，比如我们无法一次性的传入所有的异步工厂函数

即我们需要分离创建“池子”和往“池子”放异步函数这两个操作，所以我们可以按照核心逻辑写出下面的代码

export class AsyncPool<T> {
  private concurrency: number;
  private running: Set<Promise<T>>;
  private waiting: Array<() => Promise<T>>;

  constructor(concurrency: number, iterable: Iterable<() => Promise<T>>) {
    this.concurrency = concurrency;
    this.running = new Set();
    this.waiting = [];
    for (const item of iterable) {
      this.add(item);
    }
  }

  add(promise: () => Promise<T>) {
    if (this.running.size < this.concurrency) {
      const p = promise().then((val) => {
        this.running.delete(p);
        while (
          this.running.size < this.concurrency &&
          this.waiting.length > 0
        ) {
          const waitPromiseFactory = this.waiting.shift()!;
          this.add(waitPromiseFactory);
        }
        return val;
      });
      this.running.add(p);
    } else {
      this.waiting.push(promise);
    }
  }
}

这里我们使用两个池子来表示，一个是正在执行的“池子”，一个是等待中的“池子”

每次我们添加一个 Promise 时，如果此时正在执行的“池子”还有位置，那么直接放入执行即可

如果此时正在执行的池子没位置了，我们就先放入等待池子中

当正在执行的“池子”中某一个 Promise 执行完毕之后，我们需要删除执行“池子”中对应的 Promise

然后我们需要判断，如果此时等待“池子”中有未处理的 Promise ，那么就可以加入执行“池子”中开始执行

和上面版本对比的话，缺点就是没法使用 for await 了，适合零散的 Promise 的并发控制