遇到了一些奇奇怪怪的笔试题,整理一下
限制最大请求数的并发请求
来自
长沙阿里外包
题目
假设有这么一个场景:现在有20个异步请求需要发送,但是由于HTTP客户端一般对同一个服务器的并发连接个数都是有限制的,比如chrome浏览器同一时刻最大并发数是6。
实现一个并发请求函数concurrencyRequest(urls, maxNum),要求如下:
- 要求最大并发数 maxNum
- 每当有一个请求返回,就留下一个空位,可以增加新的请求
- 所有请求完成后,结果按照 urls 里面的顺序依次打出(发送请求的函数可以直接使用fetch即可)
考点
Promise、递归、fetch、队列
解答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function concurrencyRequest(urls, maxNum) {
return new Promise((resolve) => {
const result = []
function request(i) {
const url = urls[i]
if (!url) return
fetch(url).then(res => {
result[i] = res
if (result.length === urls.length) {
resolve(result)
} else {
request(i + maxNum)
}
})
}
for (let i = 0; i < maxNum && i < urls.length; i++) {
request(i)
}
})
}
const urls = [
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
'http://localhost:5500/',
//... 添加更多的 URL
];
const maxNum = 6;
concurrencyRequest(urls, maxNum).then(res => {
console.log(res);
});
</script>
</body>
</html>
思路
- 先调用最大限制数maxNum的请求,这里maxNum=6,先request 6 次
- 请求完成后把结果按索引塞入result结果中
- 再调用加上maxNum的下一个请求,例如:本次请求调用的urls索引是1,那下一次请求的url索引是1+maxNum = 7
- 对比result和urls的长度是否一致,表示全部请求完成,则resolve结束Promise函数,打印结果