js Promise并發(fā)控制數(shù)量的方法
問題
要求寫一個方法控制 Promise 并發(fā)數(shù)量,如下:
promiseConcurrencyLimit(limit, array, iteratorFn)
limit 是同一時間執(zhí)行的 promise 數(shù)量,array 是參數(shù)數(shù)組,iteratorFn 每個 promise 中執(zhí)行的異步操作。
背景
開發(fā)中需要在多個promise處理完成后執(zhí)行后置邏輯,通常使用Promise.all:
Primise.all([p1, p2, p3]).then((res) => ...)
但是有個問題是,因為 promise 創(chuàng)建后會立即執(zhí)行,也就是說傳入到 promise.all 中的多個 promise 實例,在其創(chuàng)建的時候就已經(jīng)開始執(zhí)行了,如果這些實例中執(zhí)行的異步操作都是 http 請求,那么就會在瞬間發(fā)出 n 個 http 請求,這樣顯然是不合理的;更合理的方式是:對 Promise.all 中異步操作的執(zhí)行數(shù)量加以限制,同一時間只允許有 limit 個異步操作同時執(zhí)行。
思路 & 實現(xiàn)
在背景中提到,promise 在創(chuàng)建后就會立即執(zhí)行,所以控制并發(fā)的核心在于控制 promise 實例的生成。最開始只生成 limit 個 promise 實例,然后等待這些 promise 狀態(tài)變更,只要其中某一個 promise 實例的狀態(tài)發(fā)生變更,就立即再創(chuàng)建一個 promise 實例...如此循環(huán),直到所有的 promise 都被創(chuàng)建并執(zhí)行。
npm 上有很多庫實現(xiàn)了此功能,個人覺得 tiny-async-pool 這個庫比較好,因為它直接使用了原生的 Promise 實現(xiàn)了此功能,而其他庫大多重新實現(xiàn)了 promise。其核心代碼如下:
async function asyncPool(poolLimit, array, iteratorFn) { const ret = []; // 用于存放所有的promise實例 const executing = []; // 用于存放目前正在執(zhí)行的promise for (const item of array) { const p = Promise.resolve(iteratorFn(item)); // 防止回調(diào)函數(shù)返回的不是promise,使用Promise.resolve進行包裹 ret.push(p); if (poolLimit <= array.length) { // then回調(diào)中,當這個promise狀態(tài)變?yōu)閒ulfilled后,將其從正在執(zhí)行的promise列表executing中刪除 const e = p.then(() => executing.splice(executing.indexOf(e), 1)); executing.push(e); if (executing.length >= poolLimit) { // 一旦正在執(zhí)行的promise列表數(shù)量等于限制數(shù),就使用Promise.race等待某一個promise狀態(tài)發(fā)生變更, // 狀態(tài)變更后,就會執(zhí)行上面then的回調(diào),將該promise從executing中刪除, // 然后再進入到下一次for循環(huán),生成新的promise進行補充 await Promise.race(executing); } } } return Promise.all(ret); }
測試代碼如下:
const timeout = (i) => { console.log('開始', i); return new Promise((resolve) => setTimeout(() => { resolve(i); console.log('結(jié)束', i); }, i)); }; (async () => { const res = await asyncPool(2, [1000, 5000, 3000, 2000], timeout); console.log(res); })();
代碼的核心思路為:
- 先初始化 limit 個 promise 實例,將它們放到 executing 數(shù)組中
- 使用 Promise.race 等待這 limit 個 promise 實例的執(zhí)行結(jié)果
- 一旦某一個 promise 的狀態(tài)發(fā)生變更,就將其從 executing 中刪除,然后再執(zhí)行循環(huán)生成新的 promise,放入executing 中
- 重復2、3兩個步驟,直到所有的 promise 都被執(zhí)行完
- 最后使用 Promise.all 返回所有 promise 實例的執(zhí)行結(jié)果
到此這篇關(guān)于js Promise并發(fā)控制數(shù)量的方法的文章就介紹到這了,更多相關(guān)js Promise并發(fā)控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決canvas畫布使用fillRect()時高度出現(xiàn)雙倍效果的問題
下面小編就為大家?guī)硪黄鉀Qcanvas畫布使用fillRect()時高度出現(xiàn)雙倍效果的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
輸入框組默認是div.input-group。接下來通過本文給大家介紹bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整,感興趣的朋友一起看看吧2016-10-10JS實現(xiàn)設(shè)置ff與ie元素絕對位置的方法
這篇文章主要介紹了JS實現(xiàn)設(shè)置ff與ie元素絕對位置的方法,涉及JavaScript針對頁面元素及元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-03-03