异步任务如何控制并发数？

背景#

假设我们有一个图片预加载的需求，但是我们需要控制图片预加载时的请求并发量，请设计一个函数实现上述功能。

实现#

我们的思路：

首先我们会设计一个函数来执行异步任务，然后设计一个 limit 的变量来控制最大并发量，然后我们使用一个任务池来存储档期的任务，当任务池中的数量达到最大并发量时，我们 await Promise.race有结束的任务即可。

代码实现如下：

1
async function doSomething(tasks: (() => Promise<void>)[], limit = 2) {
2
  // 正在执行的任务池
3
  // 任务池使用set来做主要是方便删除当前的任务
4
  const pool = new Set();
5
  for (const task of tasks) {
6
    // 执行任务
7
    const promise = task();
8
    // 任务池中增加当前任务
9
    pool.add(promise);
10
    // 当前任务结束时任务池中删除该任务
11
    promise.then(() => pool.delete(promise));
12
    // 当任务池中任务数量达到并发上限时需要等待任务池中任务结束一个才继续执行下一个任务
13
    if (pool.size >= limit) {
14
      await Promise.race(pool);
15
    }
16
  }
17
  // 最后的任务池中的任务执行完毕
18
  return Promise.all(pool);
19
}
20

21
const sleep = (timeout: number, taskName: string) => {
22
  return new Promise<void>(resolve => {
23
    console.log(`${taskName}start`);
24
    setTimeout(() => {
25
      console.log(`${taskName}end`);
26
      resolve();
27
    }, timeout);
28
  });
29
};
30

31
const tasks = [
32
  () => sleep(1000, '吃饭'),
33
  () => sleep(1000, '打游戏'),
34
  () => sleep(3000, '写代码'),
35
  () => sleep(5000, '睡觉'),
36
  () => sleep(7000, '锻炼身体'),
37
];
38
doSomething(tasks, 4).then(() => console.log('全部结束了'));

上述代码中的 tasks 任务队列可以替换成真实的图片请求即可，上述代码不变，新增代码如下：

1
function getLoadImagesTasks(urls: string[]) {
2
  const tasks: (() => Promise<void>)[] = [];
3
  urls.forEach(url => {
4
    tasks.push(
5
      () =>
6
        new Promise<void>(resolve => {
7
          const img = new Image();
8
          console.log(url + 'start');
9
          img.onload = () => {
10
            console.log(url + 'end');
11
            resolve();
12
          };
13
          img.src = url;
14
          // error 场景暂不考虑
15
        })
16
    );
17
  });
18
  return tasks;
19
}
20

21
const urls = [
22
  'https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg',
23
  'https://www.kkkk1000.com/images/getImgData/gray.gif',
24
  'https://www.kkkk1000.com/images/getImgData/Particle.gif',
25
  'https://www.kkkk1000.com/images/getImgData/arithmetic.png',
26
  'https://www.kkkk1000.com/images/getImgData/arithmetic2.gif',
27
  'https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg',
28
  'https://www.kkkk1000.com/images/getImgData/arithmetic.gif',
29
  'https://www.kkkk1000.com/images/wxQrCode2.png',
30
];
31

32
doSomething(getLoadImagesTasks(urls), 2).then(() => console.log('全部结束了'));

至此我们的控制并发数量的异步任务已经完成了，可以通过修改 limit 参数来控制异步任务的并发数量，达到了可控的效果。