控制浏览器网络请求并发数量

前端控制并发请求数量

Queued or stalled requests(排队或停滞的请求)

        浏览器针对同一域名的并发请求最大数量一般为6-8个，六个请求同时下载。此后，一系列请求排队或停滞。前六个请求中的一个完成后，队列中的一个请求就会开始。这个行为仅适用于HTTP/1.0和HTTP/1.1。

       1) chrome

        2)edge

一、原因

        如果一次性向同一台服务器发送太多请求，可能会给服务器造成很大的压力，甚至可能使服务器直接宕机。

        通过前面的了解，使我们意识到，当我们向服务端并行发送请求时，可能需要考虑实现对请求数量的控制以减轻服务端的压力。

二、功能实现

1.实现一

// 实现一

        function requestsController(acTasks, num = 5) {

            return new Promise((resolve, reject) => {

                if (!Array.isArray(acTasks) || acTasks.length === 0) reject('Not 0')

                const result = []

                const pros = new Array(acTasks.length).fill(0).map(() => new Promise((resolve, reject) => {

                    result.push({ resolve, reject })

                }))

                let count = 0

                const task_queue = new Array(num).fill(0).map(() => acTasks.shift());

                while (task_queue.length) _run()

                async function _run() {

                    const index = count++

                    const acTask = task_queue.shift() || acTasks.shift()

                    if (!(acTask instanceof Function)) {

                        let res = await Promise.allSettled(pros)

                        resolve(res)

                        return

                    }

                    try {

                        const res = await acTask()

                        result[index].resolve(res)

                    } catch (error) {

                        result[index].resolve(error)

                    } finally {

                        _run()

                    }

                }

            })

        }

2.实现二

代码如下（示例）：

实现二

        function requestsController(acTasks, num = 5, retArr = false) {

            if (!Array.isArray(acTasks) || acTasks.length === 0) return

            const result = []

            const pros = new Array(acTasks.length).fill(0).map(() => new Promise((resolve, reject) => {

                result.push({ resolve, reject })

            }))

            setTimeout(() => {

                let count = 0

                const task_queue = new Array(num).fill(0).map(() => acTasks.shift());

                while (task_queue.length) _run()

                async function _run() {

                    const index = count++

                    const acTask = task_queue.shift() || acTasks.shift()

                    if (!(acTask instanceof Function)) return

                    try {

                        const res = await acTask()

                        result[index].resolve(res)

                    } catch (error) {

                        result[index].resolve(error)

                    } finally {

                        _run()

                    }

                }

            })

            return retArr ? pros : Promise.allSettled(pros)

        }

总结

如果需要同一时间向服务端发送的请求过多，可以封装使用请求控制器来控制并发请求数量以减少服务端的压力。