并发请求-入队出队模拟

80 阅读1分钟

说明:正在项目推荐使用插件,例如 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.执行完出队立即执行下一个出队