结合ajax实现并发请求

最新推荐文章于 2023-07-27 17:45:39 发布

夏目csc

最新推荐文章于 2023-07-27 17:45:39 发布

阅读量265

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_61616359/article/details/129741956

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该文章描述了一个面试题，要求实现一个concurrentRequest函数，该函数接受一个URL数组和最大并发数maxNum，使用Promise和异步操作来保证请求按顺序执行且不超过最大并发限制。功能包括：当一个请求完成时，释放一个并发位置并启动新的请求，所有请求结束后返回按原顺序排列的结果。

摘要由CSDN通过智能技术生成

这是一道面试题实现一个批量请求函数 concurrentRequest(urls, maxNum)，要求如下：

• 要求最大并发数 maxNum

• 每当有一个请求返回，就留下一个空位，可以增加新的请求

• 所有请求完成后，结果按照 urls 里面的顺序依次打出

先封装一个ajax

function ajax(url) {
            return new Promise((resolve) => {
                const xhr = new XMLHttpRequest()
                xhr.open('get', url, true)
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200 || xhr.status === 304) {
                            resolve(xhr.responseText)
                        }
                    }
                }
                xhr.send()
            })
        }

并发请求函数

function concurrentRequest(urls, maxNum) {
        return new Promise((resolve) => {
            if (urls.length === 0) {
                resolve([]);
                return;
            }
            const result = [];
            let index = 0;

            async function request() {
                if (index >= urls.length) {
                    return;
                }
                const i = index;
                const url = urls[index];
                index++;
                try {
                    const res = await ajax(url);
                    result[i] = res;
                } catch (error) {
                    result[i] = error;
                } finally {
                    // 这个是相当于当前的这个通道完成后在继续-调用下一个接口
                    request();
                }
            }
            // // 取最大并发数和url长度之间最小的作为并发请求数
            const times = Math.min(max, urls.length);
            for (let i = 0; i < times; i++) {
                request();
            }
            resolve(result);
        });