偷偷告訴你，點此抽獎送紅包還送3本比紅寶書還貴的書

實現一個批量請求函數 multiRequest(urls, maxNum)，要求如下：
??要求最大并發數?maxNum
??每當有一個請求返回，就留下一個空位，可以增加新的請求
??所有請求完成后，結果按照?urls?里面的順序依次打出

這道字節跳動的題目我想很多同學應該都或多或少的見過，下面我會依次從出現的場景、問題的分析到最終的實現，一步步力求深入淺出的給出這道題目的完整解析。

場景

假設現在有這么一種場景：現有 30 個異步請求需要發送，但由于某些原因，我們必須將同一時刻并發請求數量控制在 5 個以內，同時還要盡可能快速的拿到響應結果。

應該怎么做？

首先我們來了解一下 Ajax的串行和并行。

基于 Promise.all 實現 Ajax 的串行和并行

我們平時都是基于promise來封裝異步請求的，這里也主要是針對異步請求來展開。

• 串行：一個異步請求完了之后在進行下一個請求

• 并行：多個異步請求同時進行

通過定義一些promise實例來具體演示串行/并行。

串行

var?p?=?function?()?{return?new?Promise(function?(resolve,?reject)?{setTimeout(()?=>?{console.log('1000')resolve()},?1000)})
}
var?p1?=?function?()?{return?new?Promise(function?(resolve,?reject)?{setTimeout(()?=>?{console.log('2000')resolve()},?2000)})
}
var?p2?=?function?()?{return?new?Promise(function?(resolve,?reject)?{setTimeout(()?=>?{console.log('3000')resolve()},?3000)})
}p().then(()?=>?{return?p1()
}).then(()?=>?{return?p2()
}).then(()?=>?{console.log('end')
})

如示例，串行會從上到下依次執行對應接口請求。

并行

通常，我們在需要保證代碼在多個異步處理之后執行，會用到：

Promise.all(promises:?[]).then(fun:?function);

Promise.all可以保證，promises數組中所有promise對象都達到resolve狀態，才執行then回調。

var?promises?=?function?()?{return?[1000,?2000,?3000].map(current?=>?{return?new?Promise(function?(resolve,?reject)?{setTimeout(()?=>?{console.log(current)},?current)})})
}Promise.all(promises()).then(()?=>?{console.log('end')
})

Promise.all 并發限制

這時候考慮一個場景：如果你的promises數組中每個對象都是http請求，而這樣的對象有幾十萬個。

那么會出現的情況是，你在瞬間發出幾十萬個http請求，這樣很有可能導致堆積了無數調用棧導致內存溢出。

這時候，我們就需要考慮對Promise.all做并發限制。

Promise.all并發限制指的是，每個時刻并發執行的promise數量是固定的，最終的執行結果還是保持與原來的Promise.all一致。

題目實現

思路分析

整體采用遞歸調用來實現：最初發送的請求數量上限為允許的最大值，并且這些請求中的每一個都應該在完成時繼續遞歸發送，通過傳入的索引來確定了urls里面具體是那個URL，保證最后輸出的順序不會亂，而是依次輸出。

代碼實現

function?multiRequest(urls?=?[],?maxNum)?{//?請求總數量const?len?=?urls.length;//?根據請求數量創建一個數組來保存請求的結果const?result?=?new?Array(len).fill(false);//?當前完成的數量let?count?=?0;return?new?Promise((resolve,?reject)?=>?{//?請求maxNum個while?(count?<?maxNum)?{next();}function?next()?{let?current?=?count++;//?處理邊界條件if?(current?>=?len)?{//?請求全部完成就將promise置為成功狀態,?然后將result作為promise值返回!result.includes(false)?&&?resolve(result);return;}const?url?=?urls[current];console.log(`開始?${current}`,?new?Date().toLocaleString());fetch(url).then((res)?=>?{//?保存請求結果result[current]?=?res;console.log(`完成?${current}`,?new?Date().toLocaleString());//?請求沒有全部完成,?就遞歸if?(current?<?len)?{next();}}).catch((err)?=>?{console.log(`結束?${current}`,?new?Date().toLocaleString());result[current]?=?err;//?請求沒有全部完成,?就遞歸if?(current?<?len)?{next();}});}});
}

推薦閱讀

我在阿里招前端，我該怎么幫你？（現在還可以加模擬面試群）
如何拿下阿里巴巴 P6 的前端 Offer
如何準備阿里P6/P7前端面試--項目經歷準備篇
大廠面試官常問的亮點，該如何做出？
如何從初級到專家(P4-P7)打破成長瓶頸和有效突破
若川知乎問答：2年前端經驗，做的項目沒什么技術含量，怎么辦？
若川知乎高贊：有哪些必看的 JS庫？

末尾

你好，我是若川，江湖人稱菜如若川，歷時一年只寫了一個學習源碼整體架構系列~(點擊藍字了解我)

1. 關注若川視野，回復"pdf" 領取優質前端書籍pdf，回復"1"，可加群長期交流學習

2. 我的博客地址：https://lxchuan12.gitee.io?歡迎收藏

3. 覺得文章不錯，可以點個在看呀^_^另外歡迎留言交流～

精選前端好文，伴你不斷成長

若川原創文章精選!可點擊

小提醒：若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點擊閱讀，也可以星標我的公眾號，便于查找