并发请求【JavaScript】

最新推荐文章于 2025-12-02 17:50:12 发布

原创最新推荐文章于 2025-12-02 17:50:12 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

JavaScript手写专栏收录该内容

14 篇文章

订阅专栏

什么是并发请求？

并发请求是同时发送多个网络请求, 这样可以提高网络请求的效率和速度。

如何实现并发请求控制？

需要考虑：

1.边界情况的判定。2.请求发送和响应结果保存。3.补位操作。4.完成状态判断和并发数控制。

<body>
    <script src="./index.js"></script>
    <script>
        let usls = []
        for (let index = 1; index <= 20; index++) {
            usls.push(`https://jsonplaceholder.typicode.com/todos/${index}`)
        }
        concurRequest(usls, 3).then(res => {
            console.log(res)
        })
    </script>
</body>

实现一个函数concurRequest，返回一个Promise，函数传递一个urls数组和最大并发数。

/**
 * 
 * @param {string[]} urls 戴请求的url数组
 * @param {*} maxNum 最大并发数
 */
function concurRequest(urls, maxNum) {
    if (urls.length === 0) {
        return new Promise([])
    }
    return new Promise((resolve) => {
        let index = 0 // 下一个请求索引
        let length = 0 // 完成请求数
        let result = [] // 收集结果
        // 发送下一个请求 并将结果请求放到结果数组中
        async function _request() {
            if (index >= urls.length) {
                return
            }
            const temp = index
            const url = urls[index++]
            const res = await fetch(url)
            result[temp] = res
            length++
            if (length === urls.length) {
                return resolve(res)
            }
            _request()
        }
        for (let index = 1; index <= Math.min(maxNum, urls.length); index++) {
            _request()
        }
    })
}