用30行代码封装一个工具，解决Promise的多并发问题

每日一学~

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

背景

提起 控制并发 ，大家应该不陌生，我们可以先来看看 多并发 ，再去聊聊为什么要去控制它

多并发 一般是指多个异步操作同时进行，而运行的环境中资源是有限的，短时间内过多的并发，会对所运行的环境造成很大的压力，比如前端的浏览器，后端的服务器，常见的多并发操作有：

正是因为 多并发 会造成压力，所以我们才需要去控制他，降低这个压力~，比如我可以控制最大并发数是 3，这样的话即使有100个并发，我也能保证最多同时并发的最大数量是 3

代码实现

实现思路

大致思路就是，假设现在有 9 个并发，我设置最大并发为 3，那么我将会走下面这些步骤：

Promise.all

在进行多并发的时候，我们通常会使用 Promise.all ，但是 Promise.all 并不能控制并发，或者说它本来就没这个能力，我们可以看下面的例子

最后是同时输出，这说明这几个并发是同时发生的

所以我们需要做一些改造，让 Promise.all 执行 promises 时支持控制并发，但是我们改造的不应该是 Promise.all ，而是这一个个的 fetchFn

期望效果

实现 limitFn

我们需要在函数内部维护两个变量：

并声明函数 generator ，这个函数返回一个 Promise，因为 Promise.all 最好是接收一个 Promise 数组

接下来我们来实现 enqueue 这个函数做两件事：

假如我设置最大并发数为 2，那么这一段代码在一开始的时候只会执行 2 次，因为一开始只会有 2 次符合 if 判断，大家可以思考一下为什么~

一开始执行 2 次，说明这时候两个坑位已经各自有一个 fetchFn 在执行了

接下来我们实现 run 函数，这个函数是用来包装 fetch 的，他完成几件事情：

其实第 3、4 步，是在 next 函数里面执行的

完整代码

const limitFn = (limit) => {
const queue = [];
let activeCount = 0;
const next = () => {
activeCount--;
if (queue.length > 0) {
queue.shift()();
}
};
const run = async (fn, resolve, ...args) => {
activeCount++;
const result = (async () => fn(...args))();

try {
const res = await result;
resolve(res);
} catch { }
next();
};
const enqueue = (fn, resolve, ...args) => {
queue.push(run.bind(null, fn, resolve, ...args));
if (activeCount < limit && queue.length > 0) {
queue.shift()();
}
};
const generator = (fn, ...args) =>
newPromise((resolve) => {
enqueue(fn, resolve, ...args);
});
return generator;
};










这不是我写的

其实这是一个很出名的库的源码，就是 p-limit ，哈哈，但是重要吗？知识嘛，读懂了，它就是你的，到时跟面试官唠嗑的时候，他哪知道是不是真的是你写的~

结语

我是林三心

如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 -->

广州的兄弟可以约饭哦，或者约球~我负责打铁，你负责进球，谢谢~