出現(xiàn)問題描述：當不確定異步請求個數(shù)時，為防止當一瞬間發(fā)生上百個http請求時，導致堆積了無數(shù)調(diào)用棧進而導致內(nèi)存溢出問題。
要求：將同一時刻并發(fā)請求數(shù)量控制在3個以內(nèi)，同時還要盡可能快速的拿到響應的結(jié)果。
同面試問題：
實現(xiàn)一個批量請求函數(shù) multiRequest(urls, maxNum)，要求如下：
- 要求最大并發(fā)數(shù) maxNum
- 每當有一個請求返回，就留下一個空位，可以增加新的請求
- 所有請求完成后，結(jié)果按照 urls 里面的順序依次打出
1、基于Promise.all實現(xiàn)Ajax的串行和并行
平時都是基于promise來封裝異步請求的
串行：一個異步請求完成了之后再進行下一個請求
并行：多個異步請求同時進行
示例：串行
|
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對象都達到resolve狀態(tài)，才執(zhí)行then回調(diào)
Promise.all并發(fā)限制
含義： 指每個時刻并發(fā)執(zhí)行的promise數(shù)量是固定的，最終執(zhí)行的結(jié)果還是保持與原來的promise.all一致。
思路與實現(xiàn)
采用遞歸調(diào)用來實現(xiàn)，設置最大請求數(shù)量上限。并在這些請求中的每一個都應該在完成時繼續(xù)遞歸發(fā)送，通過傳入的索引來確定了urls里面具體是那個URL，保證最后輸出的順序不會亂，而是依次輸出
代碼實現(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) { // 請求總數(shù)量 const len = urls.length; // 根據(jù)請求數(shù)量創(chuàng)建一個數(shù)組來保存請求的結(jié)果 const result = new Array(len).fill(false); // 當前完成的數(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)：
|
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
|
// 任務列表->新建任務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: "服務連接錯誤 " + item.name + " 未上傳成功", }); .finally(() => { uploadThreadNums--; resultFinishNum++; upload(); ); })(sendFinishNum); uploadThreadNums++; sendFinishNum++; } }; var creatTask = function () { axios.all(tasks).then((res) => { // 新建上傳任務 /* 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();}, |
到此這篇關于利用js實現(xiàn)Ajax并發(fā)請求限制請求數(shù)量的示例代碼的文章就介紹到這了,更多相關js Ajax并發(fā)請求限制內(nèi)容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/m0_37714008/article/details/112462983
