前端技术-并发请求
并发请求
代码解释
定义了一个函数 concurRequest,用于并发请求多个 URL 并返回它们的响应结果。
function concurRequest(urls, maxNum) {return new Promise((resolve, reject) => {if (urls.length === 0) {resolve([]);return;}const results = [];let index = 0; // 下一个请求下标let count = 0; // 请求完成数// 发送请求async function request() {// 当index等于数组的长度表示完成if (index === urls.length) return;const i = index;const url = urls[index];index++;
定义了一个名为 concurRequest 的函数,它接受两个参数:一个 URL 数组和一个最大并发数。函数返回一个 Promise 对象,该对象在所有请求完成时解决并返回响应结果数组。
该函数首先检查 URL 数组是否为空,如果为空,则立即解决 Promise 并返回一个空数组。否则,它定义了一个名为 results 的空数组,用于存储每个 URL 的响应结果。它还定义了两个变量 index 和 count,分别用于跟踪下一个请求的下标和已完成的请求数。
接下来,它定义了一个名为 request 的异步函数,用于发送请求。当 index 等于 URL 数组的长度时,表示所有请求都已完成,函数将立即返回。
在函数内部,它首先将 index 的值赋给 i,然后将 urls[index] 的值赋给 url,并将 index 的值递增。这样做是为了确保在请求完成之前,i 的值与 index 的值相同。
try {const response = (await fetch(url)).json();results[i] = await response;} catch (error) {console.log(error.message);} finally {count++;// 判断所有请求是否都完成if (count === urls.length) {resolve(results);}request();}console.log(results);}
接下来,它使用 fetch 函数发送一个 GET 请求,并将响应转换为 JSON 格式。它将响应结果存储在 results[i] 中,并将 count 的值递增。无论请求成功或失败,都会递增 count 的值。
在 finally 代码块中,它检查是否已完成所有请求。如果是,则解决 Promise 并返回响应结果数组。否则,它再次调用 request 函数以发送下一个请求。
最后,它在控制台中记录响应结果数组,并在函数的末尾调用 request 函数以开始发送第一个请求。
整体代码展示
/*** 并发请求* @param {string[]} url 待请求的 url 数组* @param {number} maxNum 最大并发数*/
function concurRequest(urls, maxNum) {return new Promise((resolve, reject) => {if (urls.length === 0) {resolve([]);return;}const results = [];let index = 0; // 下一个请求下标let count = 0; // 请求完成数// 发送请求async function request() {// 当index等于数组的长度表示完成if (index === urls.length) return;const i = index;const url = urls[index];index++;try {const response = (await fetch(url)).json();results[i] = await response;} catch (error) {console.log(error.message);} finally {count++;// 判断所有请求是否都完成if (count === urls.length) {resolve(results);}request();}console.log(results);}const times = Math.min(maxNum, urls.length);for (let i = 0; i < times; i++) {request();}});
}const urls = [];
for (let i = 1; i <= 30; i++) {const url = `https://jsonplaceholder.typicode.com/todos/${i}`;urls.push(url);
}concurRequest(urls, 6).then((response) => {console.log(response);
});

输出结果

相关文章:
前端技术-并发请求
并发请求 代码解释 定义了一个函数 concurRequest,用于并发请求多个 URL 并返回它们的响应结果。 function concurRequest(urls, maxNum) {return new Promise((resolve, reject) > {if (urls.length 0) {resolve([]);return;}const results [];let index …...
面试题-React(十三):React中获取Refs的几种方式
一、Refs的基本概念 Refs是React提供的一种访问DOM元素或组件实例的方式。通过Refs,我们可以在React中获取到底层的DOM节点或组件实例,并进行一些操作。Refs的使用场景包括但不限于:访问DOM属性、调用组件方法、获取输入框的值等。 二、获取…...
Linux CentOS 7升级curl8.4.0使用编译安装方式
1、查看当前版本 # curl --version curl 7.29.0 (x86_64-redhat-linux-gnu) libcurl/7.29.0 NSS/3.19.1 Basic ECC zlib/1.2.7 libidn/1.28 libssh2/1.4.3 Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp scp sftp smtp smtps tel…...
探寻JWT的本质:它是什么?它有什么作用?
JWT(JSON Web Token)是一种基于 JSON 格式的轻量级令牌(token)协议,它被广泛应用于网络应用程序的身份验证和授权。相较于传统的 session-based 认证机制,JWT 具有更好的扩展性和互操作性,同时也…...
关于雅思听力答案限定字数的解释。
1. No more than three words and/or a number:31,可以填3/2/1个单词;1个数字;3/2/1个单词1个数字 2. No more than three words and/or numbers:3n,可以填3/2/1个单词;n个数字;3/2…...
化工python | CSTR连续搅拌反应器系统
绝热连续搅拌釜反应器 (CSTR) 是过程工业中常见的化学系统。 容器中发生单个一级放热且不可逆的反应 A → B,假定容器始终完全混合。 试剂 A 的入口流以恒定的体积速率进入罐。 产物流B以相同的体积速率连续排出,液体密度恒定。 因此,反应液体的体积是恒定的。 在反应器中发…...
交通物流模型 | 基于自监督学习的交通流预测模型
交通物流模型 | 基于自监督学习的交通流预测模型 在智能交通系统中,准确预测不同时间段的城市交通流量是至关重要的。现有的方法存在两个关键的局限性:1、大多数模型集中预测所有区域的交通流量,而没有考虑空间异质性,即不同区域的交通流量分布可能存在偏差;2、现有模型无…...
343. 整数拆分 96.不同的二叉搜索树
343. 整数拆分 设dp[i]表示拆分 数字i 出来的正整数相乘值最大的值 (i - j) * j,和dp[i - j] * j是获得dp[i]的两种乘法,在里面求最大值可以得到当前dp[i]的最大值,但是这一次的得出的最大值如果赋值给dp[i],可能没有没赋值的dp[i]大&#…...
Vue3理解(9)
侦听器 1.计算属性允许我们声明性地计算衍生值,而在有些情况下,我们需要状态变化时执行一些方法例如修改DOM。 2.侦测数据源类型,watch的第一个参数可以市不同形式的‘数据源’,它可以市一个ref(包括计算属性),一个响应式对象&…...
CRM系统中的销售漏斗有什么作用?
随着数字化发展,越来越多的企业使用CRM销售管理系统提高销售管理水平,提升盈利能力。在这个过程中,销售漏斗起到了非常重要的作用。下面就来说说,CRM系统中的销售漏斗有什么作用? 一、销售数据可视化 CRM销售漏斗通过…...
项目(模块1:用户登陆流程分析)
验证登陆点流程...
2023年中国商用服务机器人行业发展概况分析:国产机器人厂商向海外进军[图]
商用服务机器人指在非制造业的商用服务场景中,用来替代或辅助人类进行服务性质工作的机器人;常见的商用场景中,商用服务机器人主要分为终端配送类机器人,商用清洁类机器人,引导讲解类机器人等,被广泛应用在…...
千兆光模块和万兆光模块的适用场景有哪些
随着数字化和物联网的普及,对网络速度和带宽的要求也越来越高。千兆光模块和万兆光模块是两种常见的光模块,在不同的应用场景中,它们各具优势。下面我们来探讨一下千兆光模块和万兆光模块的主要适用场景。 首先是企业网络。千兆光模块常用于…...
2 files found with path ‘lib/armeabi-v7a/liblog.so‘ from inputs:
下图两个子模块都用CMakeLists.txt引用了android的log库,编译后,在它们的build目录下都有liblog.so的文件。 四个CPU架构的文件夹下都有。 上层模块app不能决定使用哪一个,因此似乎做了合并,路径就是报错里的哪个路径,…...
qt中json类
目录 QJsonValue QJsonObject QJsonArray QJsonDocument 案例: Qt 5.0开始提供了对Json的支持,我们可以直接使用Qt提供的Json类进行数据的组织和解析,下面介绍4个常用的类。 QJsonValue 该类封装了JSON支持的数据类型。 布尔类型…...
NeurIPS 2023 | AD-PT:首个大规模点云自动驾驶预训练方案
概要 自动驾驶领域的一个长期愿景是,感知模型能够从大规模点云数据集中学习获得统一的表征,从而在不同任务或基准数据集中取得令人满意的结果。之前自监督预训练的工作遵循的范式是,在同一基准数据集上进行预训练和微调,这很难实…...
设计模式-结构型模式
文章目录 一、代理模式1.静态代理2.JDK动态代理3.CGLib动态代理4.三种代理对比 二、适配器模式1.类适配器模式2.对象适配器模式 三、装饰者模式静态代理和装饰者的区别 四、桥接模式五、外观模式六、组合模式七、享元模式 结构性模式描述如何将类或对象按某种布局组成更大的结构…...
BUUCTF学习(7): 随便注,固网杯
1、介绍 2、解题 11;show tables;# select * from 1919810931114514 concat(sel,ect from 1919810931114514 ) PEREPARE y from sql; ECCUTE y; -1; sEt sql CONCAt(se,lect * from 1919810931114514;); prePare stmt from sql; EXECUTE stmt; # 结束...
【文末福利】巧用Chat GPT快速提升职场能力:数据分析与新媒体运营
欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和技术。关…...
院内导航系统厂商分析
随着医疗技术的不断发展和医院规模的不断扩大,院内导航系统成为了现代化医院不可或缺的一部分。患者就医时,一个高效便捷的导航系统可以帮助他们快速找到目标科室,同时也能提高医院的整体运营效率。本文将推荐五家在院内导航市场具有竞争力的…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
【LeetCode】算法详解#6 ---除自身以外数组的乘积
1.题目介绍 给定一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O…...
k8s从入门到放弃之HPA控制器
k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率(或其他自定义指标)来调整这些对象的规模,从而帮助应用程序在负…...
深度解析:etcd 在 Milvus 向量数据库中的关键作用
目录 🚀 深度解析:etcd 在 Milvus 向量数据库中的关键作用 💡 什么是 etcd? 🧠 Milvus 架构简介 📦 etcd 在 Milvus 中的核心作用 🔧 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...
