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

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

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

場景

假設(shè)現(xiàn)在有這么一種場景：現(xiàn)有 30 個異步請求需要發(fā)送，但由于某些原因，我們必須將同一時刻并發(fā)請求數(shù)量控制在 5 個以內(nèi)，同時還要盡可能快速的拿到響應(yīng)結(jié)果。

應(yīng)該怎么做？

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

基于 Promise.all 實現(xiàn) Ajax 的串行和并行

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

• 串行：一個異步請求完了之后在進(jìn)行下一個請求

• 并行：多個異步請求同時進(jìn)行

通過定義一些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') })

如示例，串行會從上到下依次執(zhí)行對應(yīng)接口請求。

并行

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

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

Promise.all可以保證，promises數(shù)組中所有promise對象都達(dá)到resolve狀態(tài)，才執(zhí)行then回調(diào)。

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 并發(fā)限制

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

那么會出現(xiàn)的情況是，你在瞬間發(fā)出幾十萬個http請求，這樣很有可能導(dǎo)致堆積了無數(shù)調(diào)用棧導(dǎo)致內(nèi)存溢出。

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

Promise.all并發(fā)限制指的是，每個時刻并發(fā)執(zhí)行的promise數(shù)量是固定的，最終的執(zhí)行結(jié)果還是保持與原來的Promise.all一致。

題目實現(xiàn)

思路分析

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

代碼實現(xiàn)

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

推薦閱讀

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

末尾

你好，我是若川，江湖人稱菜如若川，歷時一年只寫了一個學(xué)習(xí)源碼整體架構(gòu)系列~(點擊藍(lán)字了解我)

關(guān)注若川視野，回復(fù)"pdf" 領(lǐng)取優(yōu)質(zhì)前端書籍pdf，回復(fù)"1"，可加群長期交流學(xué)習(xí)

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

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

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

若川原創(chuàng)文章精選!可點擊

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

總結(jié)

以上是生活随笔為你收集整理的字节面试官：如何实现Ajax并发请求控制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。