字節(jié)跳動(dòng)面試官：請(qǐng)用JS實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求控制

最近也好久沒(méi)輸出文章了，原因很簡(jiǎn)單，最近巨忙，，，，

講真的，最近也很迷茫。關(guān)于技術(shù)、關(guān)于生活吧。也找了很多在大廠的朋友去聊，想需求一些后期發(fā)展的思路。這其中也聊到了面試，聊到了招聘中會(huì)給面試者出的一些題目。我正好也好久沒(méi)面試了，就從中選了幾道。最近也會(huì)陸續(xù)出一系列關(guān)于一些面試問(wèn)題的解析。

今天這道是字節(jié)跳動(dòng)的：

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

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

場(chǎng)景

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

應(yīng)該怎么做？

首先我們來(lái)了解一下 Ajax的串行和并行。

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

我們平時(shí)都是基于promise來(lái)封裝異步請(qǐng)求的，這里也主要是針對(duì)異步請(qǐng)求來(lái)展開(kāi)。

• 串行：一個(gè)異步請(qǐng)求完了之后在進(jìn)行下一個(gè)請(qǐng)求
• 并行：多個(gè)異步請(qǐng)求同時(shí)進(jìn)行

通過(guò)定義一些promise實(shí)例來(lái)具體演示串行/并行。

串行

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')
})

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

并行

通常，我們?cè)谛枰ＷC代碼在多個(gè)異步處理之后執(zhí)行，會(huì)用到：

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

Promise.all可以保證，promises數(shù)組中所有promise對(duì)象都達(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ā)限制

這時(shí)候考慮一個(gè)場(chǎng)景：如果你的promises數(shù)組中每個(gè)對(duì)象都是http請(qǐng)求，而這樣的對(duì)象有幾十萬(wàn)個(gè)。

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

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

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

題目實(shí)現(xiàn)

思路分析

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

代碼實(shí)現(xiàn)

function?multiRequest(urls?=?[],?maxNum)?{
??//?請(qǐng)求總數(shù)量
??const?len?=?urls.length;
??//?根據(jù)請(qǐng)求數(shù)量創(chuàng)建一個(gè)數(shù)組來(lái)保存請(qǐng)求的結(jié)果
??const?result?=?new?Array(len).fill(false);
??//?當(dāng)前完成的數(shù)量
??let?count?=?0;

??return?new?Promise((resolve,?reject)?=>?{
????//?請(qǐng)求maxNum個(gè)
????while?(count???????next();
????}
????function?next()?{
??????let?current?=?count++;
??????//?處理邊界條件
??????if?(current?>=?len)?{
????????//?請(qǐng)求全部完成就將promise置為成功狀態(tài),?然后將result作為promise值返回
????????!result.includes(false)?&&?resolve(result);
????????return;
??????}
??????const?url?=?urls[current];
??????console.log(`開(kāi)始?${current}`,?new?Date().toLocaleString());
??????fetch(url)
????????.then((res)?=>?{
??????????//?保存請(qǐng)求結(jié)果
??????????result[current]?=?res;
??????????console.log(`完成?${current}`,?new?Date().toLocaleString());
??????????//?請(qǐng)求沒(méi)有全部完成,?就遞歸
??????????if?(current?????????????next();
??????????}
????????})
????????.catch((err)?=>?{
??????????console.log(`結(jié)束?${current}`,?new?Date().toLocaleString());
??????????result[current]?=?err;
??????????//?請(qǐng)求沒(méi)有全部完成,?就遞歸
??????????if?(current?????????????next();
??????????}
????????});
????}
??});
}