说明:正在项目推荐使用插件,例如 p-limit 这里只是提供一种入队出队实现控制并发的代码思路,边界情况不考虑
实现控制并发请求,一次最多执行4个请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
// 入队出队实现对并发请求最大数量的控制
const handQueue = (reqs) => {
const requestQueue = (concurrency) => {
concurrency = concurrency || 4;
const queue = [] //请求队列
let current = 0 //正在运行的请求数
//执行队列最里面的请求
const dequeue = () => {
while (queue.length && current < concurrency) {
current++
const requestPromiseFactory = queue.shift() //出队
// 执行队列请求逻辑
requestPromiseFactory().then(() => {
}).catch(() => {
}).finally(() => {
current-- //请求完成,当前请求数-1
dequeue() //执行下一个请求
})
}
}
return (requestPromiseFactory) => {
queue.push(requestPromiseFactory) //入队
dequeue() //出队
}
}
const enqueue = requestQueue(4) //创建请求队列
for (let i = 0; i < reqs; i++) {
enqueue(() => axios.get('/api/test' + i))
}
}
handQueue(130) // 130个请求入队,一次最多请求4个并发
</script>
</body>
</html>
queue请求队列 1.只要有入队操作就执行出队 2.执行完出队立即执行下一个出队