高并发处理函数
1.html部分,创建index.html文件并粘贴进去
注:模拟请求的是百度的地址,返回数据是空的,我在此只模拟请求,如用在真实项目中,可将模拟地址改为自己项目地址即可。
// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高并发模拟处理</title>
</head>
<body>
<script src="./index.js"></script>
<script>
/**
* 并发思路
* 1.把10个请求链接放进urls的数组当中
* 2.将urls数组传入并发处理的函数中,返回处理后的数据数组
*
*/
const urls = [];
for (let i = 0; i < 10; i++) {
urls.push(`https://www.baidu.com/`)
}
concurRequest(urls, 3).then((resp) => {
console.log(resp, "当并发数量全部结束时返回的数据数组");
})
</script>
</body>
</html>
2.js部分,创建index.js,并粘贴示例代码
// An highlighted block
/**
* @param {string} urls 待请求的url数组
* @param {number} maxNum 最大并发数
* @returns {Array} 返回所有请求回来的数据数组
*/
function concurRequest(urls, maxNum) {
return new Promise((resolve) => {
// 空请求数处理,当请求数为空时,直接返回空数组
if (urls.length === 0) {
resolve([]);
}
let index = 0; //请一次请求对应的下标
let count = 0; //记录请求次数
const result = [];
async function request() {
const i = index; //url地址的索引
const url = urls[index]; //具体的当前请求地址
index++; //每次请求都将索引+1,请求urls的第i项的地址
try {
//捕获错误
const resp = await fetch(url, {
method: "GET",
mode: "no-cors", //解决跨域
headers: {
"Content-Type": "application/json; charset=utf-8",
},
// body: JSON.stringify(this.state), // post请求时把你要传的数据放在这里转化成json
});
result[i] = resp; //将最新返回的数据放在对应的索引位置
} catch (error) {
result[i] = error; //错误也放在数据对应索引的位置
} finally {
count++;
//当地址都请求完成后返回,也就是请求的次数等于请求链接数时,返回请求结果
if (count === urls.length) {
resolve(result);
}
// 判断urls中数据是否请求完成了,没有请求完成就再次调用
if (index < urls.length) {
request();
}
}
}
//并发请求次数,取输入的并发请求数或者是地址数组的数的最小值
for (let i = 0; i < Math.min(maxNum, urls.length); i++) {
request();
}
});
}
总结
我看到网上有说这和promise.all有啥区别,在这里解释一下,promise.all虽然都是等所有数据都结束以后返回的,但是他是同时发送了所有数据,并没有限制了每次发送请求的次数,这就是他们的区别