提起控制并發(fā)，大家應(yīng)該不陌生，我們可以先來(lái)看看多并發(fā)，再去聊聊為什么要去控制它。
多并發(fā)一般是指多個(gè)異步操作同時(shí)進(jìn)行，而運(yùn)行的環(huán)境中資源是有限的，短時(shí)間內(nèi)過(guò)多的并發(fā)，會(huì)對(duì)所運(yùn)行的環(huán)境造成很大的壓力，比如前端的瀏覽器，后端的服務(wù)器，常見(jiàn)的多并發(fā)操作有：
圖片
正是因?yàn)槎嗖l(fā)會(huì)造成壓力，所以我們才需要去控制他，降低這個(gè)壓力~，比如我可以控制最大并發(fā)數(shù)是 3，這樣的話即使有100個(gè)并發(fā)，我也能保證最多同時(shí)并發(fā)的最大數(shù)量是 3。
圖片
大致思路就是，假設(shè)現(xiàn)在有 9 個(gè)并發(fā)，我設(shè)置最大并發(fā)為 3，那么我將會(huì)走下面這些步驟：
1、先定好三個(gè)坑位
2、讓前三個(gè)并發(fā)進(jìn)去坑位執(zhí)行
3、看哪個(gè)坑位并發(fā)先執(zhí)行完，就從剩余的并發(fā)中拿一個(gè)進(jìn)去補(bǔ)坑
4、一直重復(fù)第 3 步，一直到所有并發(fā)執(zhí)行完
圖片
在進(jìn)行多并發(fā)的時(shí)候，我們通常會(huì)使用Promise.all，但是Promise.all并不能控制并發(fā)，或者說(shuō)它本來(lái)就沒(méi)這個(gè)能力，我們可以看下面的例子：
圖片
最后是同時(shí)輸出，這說(shuō)明這幾個(gè)并發(fā)是同時(shí)發(fā)生的。
圖片
所以我們需要做一些改造，讓Promise.all執(zhí)行 promises 時(shí)支持控制并發(fā)，但是我們改造的不應(yīng)該是Promise.all，而是這一個(gè)個(gè)的fetchFn。
圖片
圖片
我們需要在函數(shù)內(nèi)部維護(hù)兩個(gè)變量：
并聲明函數(shù) generator ，這個(gè)函數(shù)返回一個(gè) Promise，因?yàn)?Promise.all 最好是接收一個(gè) Promise 數(shù)組。
圖片
接下來(lái)我們來(lái)實(shí)現(xiàn) enqueue 這個(gè)函數(shù)做兩件事：
圖片
假如我設(shè)置最大并發(fā)數(shù)為 2，那么這一段代碼在一開(kāi)始的時(shí)候只會(huì)執(zhí)行 2 次，因?yàn)橐婚_(kāi)始只會(huì)有 2 次符合 if 判斷，大家可以思考一下為什么！
圖片
一開(kāi)始執(zhí)行 2 次，說(shuō)明這時(shí)候兩個(gè)坑位已經(jīng)各自有一個(gè) fetchFn 在執(zhí)行了。
接下來(lái)我們實(shí)現(xiàn) run 函數(shù)，這個(gè)函數(shù)是用來(lái)包裝 fetch 的，他完成幾件事情：
1、將 activeCount++ ，這時(shí)候執(zhí)行中的并發(fā)數(shù) +1
2、將 fetchFn 執(zhí)行，并把結(jié)果 resolve 出去，說(shuō)明這個(gè)并發(fā)執(zhí)行完了
3、將 activeCount--，這時(shí)候執(zhí)行中的并發(fā)數(shù) -1
4、從 queue 中取一個(gè)并發(fā)，拿來(lái)補(bǔ)坑執(zhí)行
圖片
其實(shí)第 3、4 步，是在 next 函數(shù)里面執(zhí)行的。
圖片
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) => new Promise((resolve) => { enqueue(fn, resolve, ...args); }); return generator;};其實(shí)這是一個(gè)很出名的庫(kù)的源碼，就是p-limit，哈哈，但是重要嗎？知識(shí)嘛，讀懂了，它就是你的，到時(shí)跟面試官嘮嗑的時(shí)候，他哪知道是不是真的是你寫(xiě)的！
本文鏈接：http://www.www897cc.com/showinfo-26-92182-0.html用30行代碼封裝一個(gè)工具，解決Promise的多并發(fā)問(wèn)題
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)