目錄前言Ajax的串行與并行Ajax的并發(fā)請求控制的兩大解決方案基于Promise遞歸實(shí)現(xiàn)基于Class實(shí)現(xiàn)代碼展示總結(jié)前言

最近看到一個(gè)面試題，當(dāng)然了，就是這篇文章的標(biāo)題,Ajax的并發(fā)請求的控制，感覺挺有意思的，在社區(qū)看了下，應(yīng)該是字節(jié)的面試題，也挺多大佬對這個(gè)進(jìn)行了總結(jié)，都看了下，于是自己也想試著總結(jié)下，代碼文末會(huì)全部貼出，如有不足，請指出！

Ajax的串行與并行 串行：一般業(yè)務(wù)需求是下個(gè)接口需要用到上個(gè)接口的返回的數(shù)據(jù)，前端常用的請求庫是Axios,本身就是基于Promise的HTTP庫，我們直接采用鏈?zhǔn)秸{(diào)用，或者采用Async Await 的方式就可以實(shí)現(xiàn)，就不做演示了 并行:就是多個(gè)請求同時(shí)發(fā)生，一般情況會(huì)用于當(dāng)所有數(shù)據(jù)都拿到后進(jìn)行渲染頁面，或者其他的操作，主要還是基于Promise.all實(shí)現(xiàn)方式如下

上面模擬實(shí)現(xiàn)了基于Promise.all的并行操作，打印結(jié)果入下

是不是覺得的這就結(jié)束了，不存在的？接下來才是正菜，我們試想有種情況，一個(gè)頁面中需要同時(shí)發(fā)送上萬個(gè)請求，全部成功后再去做一些操作，這樣會(huì)導(dǎo)致什么后果呢？代碼無法執(zhí)行，內(nèi)存溢出，哎~這個(gè)時(shí)候就回到了我們文章的主題上了，如何對Ajax并發(fā)請求的控制呢？我讓他一次性只能輸出一定數(shù)量的請求，直到所有的都成功為止，接下來我將用兩種方法實(shí)現(xiàn)這個(gè)操作，望讀者朋友們不吝賜教

Ajax的并發(fā)請求控制的兩大解決方案基于Promise遞歸實(shí)現(xiàn)

以下的兩種方法都是需要用到上圖中的那個(gè)Tasks數(shù)組的，請大家記住它,第一中基于Promise的方法，大致思路是：當(dāng)你傳入一個(gè)并發(fā)量pool時(shí)，會(huì)創(chuàng)建pool個(gè)工作區(qū)，每一個(gè)工作區(qū)回去拿對應(yīng)的任務(wù)(請求)去執(zhí)行，成功后保存，然后繼續(xù)去拿任務(wù)（請求），直到工作區(qū)沒有任務(wù)了，當(dāng)然了，失敗直接終止， 大致思路就是這樣，下面我對每一行代碼進(jìn)行了注釋，請笑納

基于Class實(shí)現(xiàn)

第二種方法是基于Class來實(shí)現(xiàn)的，和上面的區(qū)別在于這個(gè)只創(chuàng)造一個(gè)工作區(qū)，大致思路：創(chuàng)建一個(gè)工作區(qū)用于執(zhí)行任務(wù)(請求)，然后將所有任務(wù)都推入，但是沒次只能執(zhí)行對應(yīng)的并發(fā)數(shù)，當(dāng)小于并發(fā)數(shù)市，繼續(xù)去拿任務(wù)執(zhí)行它，直到?jīng)]有任務(wù)(請求)為止， 就是這樣，下面是具體實(shí)現(xiàn)

代碼展示

這里把這兩種方法的實(shí)現(xiàn)代碼貼出

const delay = function delay(interval) { return new Promise((res,rej) => {setTimeout(() => { res(interval)}, interval); }) } let tasks = [() => { return delay(1000) },() => { return delay(1003) },() => { return delay(1005) },() => { return delay(1002) },() => { return delay(1004) },() => { return delay(1006) }] // 通過Promise.all實(shí)現(xiàn)并行 Promise.all(tasks.map(task => task())).then(res => { console.log(res); }) // 基于Promise實(shí)現(xiàn) function creatRequest(tasks,pool) { // 每次控制的發(fā)送請求的數(shù)量pool pool = pool || 5 // 用于存儲(chǔ)每一次請求的結(jié)果(按順序進(jìn)行存貯) let results = [], // together 用于創(chuàng)建工作區(qū)，當(dāng)pool傳入的是幾，我們就對應(yīng)的創(chuàng)建幾個(gè)工作區(qū) // 也就是創(chuàng)建一個(gè)長度為pool且值為null的一個(gè)數(shù)組 together = new Array(pool).fill(null), // index為每次獲取的任務(wù)值 index = 0; together = together.map(() => {// 基于Promise進(jìn)行管理return new Promise((resolve,reject) => { // 創(chuàng)建一個(gè)函數(shù)，進(jìn)來立刻執(zhí)行 const run = function run() { // 如果任務(wù)池已經(jīng)空了，說明請求發(fā)送完成了，直接成功 if(index >= tasks.length) { resolve() return } // 先將index保存一下用于存儲(chǔ)當(dāng)前成功請求的結(jié)果 let old_index = index, // 獲取當(dāng)前發(fā)送的請求，然后把index進(jìn)行累加，所以上面會(huì)把index保存起來 // 這里index++ 是先運(yùn)算后累加的，而++index則相反，先累加后運(yùn)算task = tasks[index++]; // 執(zhí)行請求 task().then(result => { // 將成功結(jié)果保存 results[old_index] = result // 遞歸繼續(xù)執(zhí)行，也就是繼續(xù)拿到任務(wù)到工作區(qū)執(zhí)行 run(); }).catch(reason => { reject(reason) }) } // 立即執(zhí)行 run()}) }) // 用Promise.all管控工作區(qū)，也就是每次并發(fā)兩個(gè)請求 return Promise.all(together).then(() => results) } creatRequest(tasks,2).then(results => { // 都成功，整體才成功，按順序存儲(chǔ)結(jié)果 console.log(’成功’,results); }).catch(resolve => { // 只要有一個(gè)失敗，整體失敗 console.log(’失敗’); }) // 基于Class實(shí)現(xiàn) function creatRequest(tasks,pool,callback) { // 參數(shù)的限制與驗(yàn)證 if(typeof pool === ’function’) {callback = pool;pool = 5 } if(typeof pool !== ’number’) pool = 5 if(typeof callback !== ’function’) callback = function () {} // ------- class TaskQueue {// 正在運(yùn)行的個(gè)數(shù)runing = 0;// 將所有任務(wù)所存在的隊(duì)列queue = [];// 存儲(chǔ)執(zhí)行任務(wù)(請求)的結(jié)果results = [];pushTask(task) { let self = this // 將任務(wù)推入工作區(qū) self.queue.push(task) // 執(zhí)行發(fā)送請求的邏輯 self.next()}next() { let self = this // 當(dāng)正在執(zhí)行的任務(wù)數(shù)小于并發(fā)量的時(shí)候繼續(xù)去拿任務(wù)執(zhí)行 while(self.runing < pool && self.queue.length) { self.runing++; // 相當(dāng)于拿一個(gè)任務(wù)刪除一個(gè)任務(wù) let task = self.queue.shift(); // 執(zhí)行請求 task().then(result => { // 將執(zhí)行結(jié)果保存 self.results.push(result) }).finally(() => { // 將正在運(yùn)行的個(gè)數(shù)清除 self.runing-- // 繼續(xù)執(zhí)行請求 self.next() }) } // 當(dāng)沒有任務(wù)了循環(huán)結(jié)束 if(self.runing === 0) callback(self.results)} } // 實(shí)例化 let TQ = new TaskQueue() tasks.forEach(task => TQ.pushTask(task)) } creatRequest(tasks,2,results=> { console.log(results); })總結(jié)

以上就是對這套面試題的總結(jié)了，也是自己做下記錄，后續(xù)會(huì)不斷的更新前端方面的文章，最后還是希望各位前端的小伙伴們都能堅(jiān)持學(xué)習(xí)，技術(shù)不斷提升,加油吧，騷年！！！

到此這篇關(guān)于如何基于JS實(shí)現(xiàn)Ajax并發(fā)請求控制的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)Ajax并發(fā)請求控制內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！