出現(xiàn)問題描述：當(dāng)不確定異步請(qǐng)求個(gè)數(shù)時(shí)，為防止當(dāng)一瞬間發(fā)生上百個(gè)http請(qǐng)求時(shí)，導(dǎo)致堆積了無數(shù)調(diào)用棧進(jìn)而導(dǎo)致內(nèi)存溢出問題。
要求：將同一時(shí)刻并發(fā)請(qǐng)求數(shù)量控制在3個(gè)以內(nèi)，同時(shí)還要盡可能快速的拿到響應(yīng)的結(jié)果。
同面試問題：
實(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 里面的順序依次打出
1、基于Promise.all實(shí)現(xiàn)Ajax的串行和并行
平時(shí)都是基于promise來封裝異步請(qǐng)求的
串行：一個(gè)異步請(qǐng)求完成了之后再進(jìn)行下一個(gè)請(qǐng)求
并行：多個(gè)異步請(qǐng)求同時(shí)進(jìn)行
示例：串行
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
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')}) |
并行：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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對(duì)象都達(dá)到resolve狀態(tài)，才執(zhí)行then回調(diào)
Promise.all并發(fā)限制
含義： 指每個(gè)時(shí)刻并發(fā)執(zhí)行的promise數(shù)量是固定的，最終執(zhí)行的結(jié)果還是保持與原來的promise.all一致。
思路與實(shí)現(xiàn)
采用遞歸調(diào)用來實(shí)現(xiàn)，設(shè)置最大請(qǐng)求數(shù)量上限。并在這些請(qǐng)求中的每一個(gè)都應(yīng)該在完成時(shí)繼續(xù)遞歸發(fā)送，通過傳入的索引來確定了urls里面具體是那個(gè)URL，保證最后輸出的順序不會(huì)亂，而是依次輸出
代碼實(shí)現(xiàn)：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
function multiRequest(urls = [], maxNum) { // 請(qǐng)求總數(shù)量 const len = urls.length; // 根據(jù)請(qǐng)求數(shù)量創(chuàng)建一個(gè)數(shù)組來保存請(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 < maxNum) { 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(`開始 ${current}`, new Date().toLocaleString()); fetch(url) .then((res) => { // 保存請(qǐng)求結(jié)果 result[current] = res; console.log(`完成 ${current}`, new Date().toLocaleString()); // 請(qǐng)求沒有全部完成, 就遞歸 if (current < len) { next(); } }) .catch((err) => { console.log(`結(jié)束 ${current}`, new Date().toLocaleString()); result[current] = err; // 請(qǐng)求沒有全部完成, 就遞歸 if (current < len) { next(); } }); } });} |
代碼實(shí)現(xiàn)：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
// 任務(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(); // 完成請(qǐng)求 } 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: "錯(cuò)誤", message: "服務(wù)連接錯(cuò)誤 " + 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 == "自動(dòng)識(shí)別") { flagArr.push("2"); calcFlag = flagArr.reduce( (accu, curr) => Number(accu) + Number(curr) ); _this.ruleForm.recognize == "自動(dòng)識(shí)別" ? (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ā)請(qǐng)求限制請(qǐng)求數(shù)量的示例代碼的文章就介紹到這了,更多相關(guān)js Ajax并發(fā)請(qǐng)求限制內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/m0_37714008/article/details/112462983
