出現問題描述：當不確定異步請求個數時，為防止當一瞬間發生上百個http請求時，導致堆積了無數調用棧進而導致內存溢出問題。
要求：將同一時刻并發請求數量控制在3個以內，同時還要盡可能快速的拿到響應的結果。
同面試問題：
實現一個批量請求函數 multiRequest(urls, maxNum)，要求如下：
- 要求最大并發數 maxNum
- 每當有一個請求返回，就留下一個空位，可以增加新的請求
- 所有請求完成后，結果按照 urls 里面的順序依次打出
1、基于Promise.all實現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保證數組中所有promise對象都達到resolve狀態，才執行then回調
Promise.all并發限制
含義： 指每個時刻并發執行的promise數量是固定的，最終執行的結果還是保持與原來的promise.all一致。
思路與實現
采用遞歸調用來實現，設置最大請求數量上限。并在這些請求中的每一個都應該在完成時繼續遞歸發送，通過傳入的索引來確定了urls里面具體是那個URL，保證最后輸出的順序不會亂，而是依次輸出
代碼實現：
|
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) { // 請求總數量 const len = urls.length; // 根據請求數量創建一個數組來保存請求的結果 const result = new Array(len).fill(false); // 當前完成的數量 let count = 0; return new Promise((resolve, reject) => { // 請求maxNum個 while (count < maxNum) { next(); } function next() { let current = count++; // 處理邊界條件 if (current >= len) { // 請求全部完成就將promise置為成功狀態, 然后將result作為promise值返回 !result.includes(false) && resolve(result); return; } const url = urls[current]; console.log(`開始 ${current}`, new Date().toLocaleString()); fetch(url) .then((res) => { // 保存請求結果 result[current] = res; console.log(`完成 ${current}`, new Date().toLocaleString()); // 請求沒有全部完成, 就遞歸 if (current < len) { next(); } }) .catch((err) => { console.log(`結束 ${current}`, new Date().toLocaleString()); result[current] = err; // 請求沒有全部完成, 就遞歸 if (current < len) { next(); } }); } });} |
代碼實現：
|
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實現Ajax并發請求限制請求數量的示例代碼的文章就介紹到這了,更多相關js Ajax并發請求限制內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/m0_37714008/article/details/112462983
