首页 > 其他分享 >关于前端:如何实现并发请求数量控制?

关于前端:如何实现并发请求数量控制?

时间:2022-11-09 17:03:05浏览次数:41  
标签:index const 请求 前端 results 并发 length urls

原文地址: https://juejin.cn/post/7163522138698153997

// 并发请求函数
const concurrencyRequest = (urls, maxNum) => {
    return new Promise((resolve) => {
        if (urls.length === 0) {
            resolve([]);
            return;
        }
        const results = [];
        let index = 0; // 下一个请求的下标
        let count = 0; // 当前请求完成的数量

        // 发送请求
        async function request() {
            if (index === urls.length) return;
            const i = index; // 保存序号,使result和urls相对应
            const url = urls[index];
            index++;
            console.log(url);
            try {
                const resp = await fetch(url);
                // resp 加入到results
                results[i] = resp;
            } catch (err) {
                // err 加入到results
                results[i] = err;
            } finally {
                count++;
                // 判断是否所有的请求都已完成
                if (count === urls.length) {
                    console.log('完成了');
                    resolve(results);
                }
                request();
            }
        }

        // maxNum和urls.length取最小进行调用
        const times = Math.min(maxNum, urls.length);
        for(let i = 0; i < times; i++) {
            request();
        }
    })
}
测试

const urls = [];
for (let i = 1; i <= 20; i++) {
    urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
}
concurrencyRequest(urls, 3).then(res => {
    console.log(res);
})

 

标签:index,const,请求,前端,results,并发,length,urls
From: https://www.cnblogs.com/huanhuan55/p/16874350.html

相关文章

  • 前端路由
    1.路由基本概念和原理(1)路由本质:对应关系后端路由:根据不同用户URL请求,返回不同内容        本质:URL请求地址与服务器资源之间的对应关系前端路由:根......
  • Vuex中actions如何优雅处理接口请求
    前言在项目开发中,如果使用到了vuex,通常我会将所有的接口请求单独用一个文件管理,而业务逻辑写在actions中,一方面方便统一管理项目中的所有请求,其次代码结构更加清晰,最重......
  • http 请求头UA收集
    "User-Agent":random.choice(["Mozilla/5.0(WindowsNT10.0;WOW64)",'Mozilla/5.0(WindowsNT6.3;WOW64)',......
  • 0009.Django请求与响应
    HttpRequest对象服务器接受到http协议的请求后,会根据报文创建HttpRequest对象视图函数的第一个参数是HttpRequest对象在django.http模型中定义了HttpRequest对象的API......
  • 并发
    线程状态New(新建):刚newThread()创建,还没开始运行runRunnable(可运行):调用start方法,可能正在运行也可能没有运行Blocked(阻塞):要获得一个锁Waiting(等待):等待通知Timedwaitin......
  • 前端pink老师网课
    0p前言先听与看,动手练习,分享交流1p品优购静态网站基础班精通网页布局html5基础,没有兼容性的标签css3基础,传统企业网页制作h5c3,有一定兼容性,与未来更好地接轨品优购电......
  • 使用OkHttp发送POST请求的快速入门指南
    英文原文:https://www.baeldung.com/okhttp-post1介绍本文将介绍OkHttp客户端的基本用法。在本篇简短的技术文章中,我们将特别介绍OkHttp3.x版本中发送Post请求的不......
  • RestTemplate发送带参数和头的GET请求
    本文译自:https://attacomsian.com/blog/spring-boot-resttemplate-get-request-parameters-headers在本文中,你将学会在SpringBoot应用中使用RestTemplate类发送不同的HTT......
  • 京东前端经典react面试题合集
    为什么调用setState而不是直接改变state?解答如果您尝试直接改变组件的状态,React将无法得知它需要重新渲染组件。通过使用setState()方法,React可以更新组件的UI。另......
  • 腾讯前端二面常考react面试题总结
    你理解“在React中,一切都是组件”这句话。组件是React应用UI的构建块。这些组件将整个UI分成小的独立并可重用的部分。每个组件彼此独立,而不会影响UI的其余部分。......