出現(xiàn)問題描述：當(dāng)不確定異步請求個數(shù)時，為防止當(dāng)一瞬間發(fā)生上百個http請求時，導(dǎo)致堆積了無數(shù)調(diào)用棧進(jìn)而導(dǎo)致內(nèi)存溢出問題。

要求：將同一時刻并發(fā)請求數(shù)量控制在3個以內(nèi)，同時還要盡可能快速的拿到響應(yīng)的結(jié)果。

同面試問題：

實(shí)現(xiàn)一個批量請求函數(shù) multiRequest(urls, maxNum)，要求如下：

要求最大并發(fā)數(shù) maxNum 每當(dāng)有一個請求返回，就留下一個空位，可以增加新的請求 所有請求完成后，結(jié)果按照 urls 里面的順序依次打出1、基于Promise.all實(shí)現(xiàn)Ajax的串行和并行

平時都是基于promise來封裝異步請求的

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

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

示例：串行

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

并行：

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: []).then(fun: function);

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

Promise.all并發(fā)限制

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

思路與實(shí)現(xiàn)

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

代碼實(shí)現(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(); } }); } });}

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

// 任務(wù)列表->新建任務(wù) uploadFile() { let _this = this; var uploadThreadLimitNums = 3, uploadThreadNums = 0, sendFinishNum = 0, resultFinishNum = 0; var marks = 0; var tasks = []; var upload = function () { while (uploadThreadNums < uploadThreadLimitNums) { if (sendFinishNum >= _this.fileList.length) { if (resultFinishNum >= _this.fileList.length) { creatTask(); // 完成請求 } return; } (function (j) { let item = _this.fileList[j]; let p = new FormData(); p.append('file', item); tasks.push( axios({method: 'post',url: `${window.UL_CONFIG.BASEURL}/api/files/upload`,data: p,onUploadProgress: (progressEvent) => { for (let i in _this.rowData) { _this.rowData[i].name === item.name ? (_this.rowData[i].percent = Math.round( (progressEvent.loaded / progressEvent.total) * 100 )) : ''; }}, }).then((res) => {/* let obj = {}; obj.url = `${window.UL_CONFIG.BASEURL}/api/files/${res.data}`; obj.fileName = item.name; obj.fmt = _this.ruleForm.format; obj.samplingRate = _this.ruleForm.samplingRate; fileUrls.push(obj); */}).catch((e) => { ? (_this.rowData[i].percent = 0) _this.$notify.error({ title: '錯誤', message: '服務(wù)連接錯誤 ' + item.name + ' 未上傳成功', });.finally(() => { uploadThreadNums--; resultFinishNum++; upload(); ); })(sendFinishNum); uploadThreadNums++; sendFinishNum++; } }; var creatTask = function () { axios.all(tasks).then((res) => { // 新建上傳任務(wù) /* let fd1, fd2, calcFlag, flagArr, language; fd1 = {}; flagArr = Object.assign([], _this.ruleForm.checkList); if (_this.ruleForm.recognize == '自動識別') { flagArr.push('2'); calcFlag = flagArr.reduce( (accu, curr) => Number(accu) + Number(curr) ); _this.ruleForm.recognize == '自動識別' ? (language = '') : (language = _this.ruleForm.recognize); fd1.processContent = calcFlag; fd1.remark = _this.ruleForm.remark; fd1.name = _this.ruleForm.taskName; fd1.fmt = _this.ruleForm.format; fd1.samplingRate = _this.ruleForm.samplingRate; fd1.language = language; fd1.type = 1; // type: 1 語音, 2 視頻 fd1.files = fileUrls; */ newTask(fd1).then((res) => { /* _this.cmpltBtnState = false; _this.$store.commit('setTaskId', res.data.id); _this.submitFailNumber = res.data.submitFailNumber; */ _this.$parent.dataInit(); }); }); upload(); },

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