type
status
date
slug
summary
tags
category
icon
password
Edited
Apr 13, 2023 08:48 AM
Created
Apr 13, 2023 08:30 AM
前提
前端代码经常要处理各种异步逻辑。
有的是串行的：
有的是并行的：
并行的异步逻辑有时还要做并发控制。
并发控制是常见的需求，也是面试常考的面试题。
一般我们会用
p-limit 来做：比如上面这段逻辑，就是几个异步逻辑并行执行，并且最大并发是 2。
那如何实现这样的并发控制呢？
p-limit
p-limit 用于实现并发控制，限制同时进行的异步操作数量。通常用于处理前端代码中的异步逻辑，可以控制并发的数量，避免一次性进行太多的异步操作导致性能问题。我们自己写了一个手写的并发控制库，核心思路是通过维护一个队列保存所有的任务，在最开始一次性执行最大并发数的任务，然后每执行完一个任务就再执行一个新的。其中要注意的是为了保证获取的任务数量是准确的，要在所有微任务执行完之后再获取数量。实现并发控制只需要 40 多行代码，相比于 p-limit 简单很多。
实现
我们自己来写一个：
- 首先，要传入并发数量，返回一个添加并发任务的函数，我们把它叫做 generator：
- 这里添加的并发任务要进行排队，所以我们准备一个 queue，并记录当前在进行中的异步任务。
- 添加的异步任务就入队，也就是 enqueue。
enqueue 做的事情就是把一个异步任务添加到 queue 中，并且只要没达到并发上限就再执行一批任务：
- 具体运行的逻辑是这样的
计数，运行这个函数，改变最后返回的那个 promise 的状态，然后执行完之后进行下一步处理：
- 下一步处理自然就是把活跃任务数量减一，然后再跑一个任务：
这样就保证了并发的数量限制。
简易源码
执行
并发数量为 2。
我们试下：
先并发执行前两个任务，2s 的时候一个任务执行完，又执行了一个任务，然后再过一秒，都执行完了，有同时执行了两个任务。
经过测试，我们已经实现了并发控制！
回顾一下我们实现的过程，其实就是一个队列来保存任务，开始的时候一次性执行最大并发数的任务，然后每执行完一个启动一个新的。
还是比较简单的。
上面的 40 行代码是最简化的版本，其实还有一些可以完善的地方，我们继续完善一下。
首先，我们要把并发数暴露出去，还要让开发者可以手动清理任务队列。
我们这样写：
用
Object.defineProperties 只定义 get 函数，这样 activeCount、pendingCount 就是只能读不能改的。同时还提供了一个清空任务队列的函数。
然后传入的参数也加个校验逻辑：
不是整数或者小于 0 就报错，当然，Infinity 也是可以的。
最后，其实还有一个特别需要完善的点，就是这里：
应该改成这样：
因为
activeCount-- 的逻辑是在执行完任务之后才执行的，万一任务还没执行完，这时候 activeCount 就是不准的。所以为了保证并发数量能控制准确，要等全部的微任务执行完再拿 activeCount。
怎么在全部的微任务执行完再执行逻辑呢？
加一个新的微任务不就行了？
所以有这样的 await Promise.resolve(); 的逻辑。
这样，就是一个完善的并发控制逻辑了，p-limit 也是这么实现的。
感兴趣的同学可以自己试一下：
完整代码
总结
js 代码经常要处理异步逻辑的串行、并行，还可能要做并发控制，这也是面试常考的点。
实现并发控制的核心就是通过一个队列保存所有的任务，然后最开始批量执行一批任务到最大并发数，然后每执行完一个任务就再执行一个新的。
其中要注意的是为了保证获取的任务数量是准确的，要在所有微任务执行完之后再获取数量。
参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/p-limit
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。