news 2026/7/11 23:53:16

前端js实现按添加顺序返回并发异步任务的执行结果

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前端js实现按添加顺序返回并发异步任务的执行结果

题目:N个并发任务,异步执行,按照任务的添加顺序返回执行结果,而不是谁先执行完返回谁,保证并发任务的执行顺序。

给定下面的代码,要求实现ConRequests类。

//模拟异步请求functionmockRequest(name,delay){returnnewPromise((resolve)=>{setTimeOut(()=>{resolve(`任务{name}完成`)},delay)})}constrequests=newConRequests()constreq1=requests.add(mockRequest('A',3000))constreq2=requests.add(mockRequest('B',1000))constreq3=requests.add(mockRequest('C',2000))req1.then(console.log)//.then() 接收的是一个函数引用。等价于request1.then(((result)=>console.log(result));req2.then(console.log)req3.then(console.log)//输出://任务A完成//任务B完成//任务C完成

思路:
// 使用一个队列(数组)来记录所有已添加的任务 Promise。
// 维护一个 currentIndex 表示当前应返回第几个结果。
// 每个 Promise 完成后,将其结果存入一个结果数组。
// 一旦前面的结果都已就绪,就按顺序 resolve 对应的包装 Promise。

classConRequests{constructor(){this.requests=[]//存放请求{promise, resolve, reject}this.results=[]//存放执行结果this.currentIndex=0//当前能释放结果的索引}add(promise){returnnewPromise((resolve,reject)=>{//index作用:// 保证任务 A(index=0)、任务 B(index=1)、任务 C(index=2)的requests/results下标严格对应;// 即使 B 先完成(results[1] = 结果),但results[0]还是null(A 未完成),tryRelease会卡在currentIndex=0,直到 A 完成后才会依次释放 A、B、C。constindex=this.requests.lengththis.results[index]=null//占位,避免下标错乱this.requests.push(promise,resolve,reject)promise.then((result)=>{this.results[index]=result//更新结果this.tryRelease()//尝试释放已完成的连续结果}).catch((err)=>{this.results[index]=errthis.tryRelease()})})}tryRelease(){while(this.currentIndex<this.requests.length&&this.results[this.currentIndex]!==null){constresult=this.results[this.currentIndex]const{resolve,reject}=this.requests[this.currentIndex]if(resultinstanceofError){reject(result)}else{resolve(result)}this.currentIndex++}}}
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/5 23:51:17

运维人慌了!大模型要来“抢饭碗“?不,这是你的“职场升级包“!小白程序员必看大模型如何重构IT运维新生态

背景 在科技的发展以及现有大环境降本增效的趋势下&#xff0c;企业对IT运维的要求也越来越高。然而&#xff0c;许多企业仍然依赖传统的运维方式&#xff0c;这种模式在面对复杂的IT环境时暴露出诸多问题。 首先&#xff0c;运维效率低下成为一大痛点。传统运维方式主要依靠…

作者头像 李华
网站建设 2026/7/8 12:55:22

Vue响应式原理

Vue响应式原理 数据劫持&#xff1a;vue2的Object.defineProperty(对属性添加getter和setter方法)&#xff0c;vue3的Proxy。依赖收集&#xff1a;模板渲染时收集&#xff0c;computed收集&#xff0c;watch收集。依赖执行&#xff1a;将收集到的依赖依次执行。 依赖其实就是数…

作者头像 李华
网站建设 2026/7/8 1:28:16

Docker Compose Agent配置没人说的秘密:4种性能优化方案曝光

第一章&#xff1a;Docker Compose Agent配置的现状与挑战在现代容器化应用部署中&#xff0c;Docker Compose 作为定义和运行多容器应用的重要工具&#xff0c;广泛用于开发、测试及轻量级生产环境。然而&#xff0c;随着服务规模的增长和部署复杂度的提升&#xff0c;基于 Do…

作者头像 李华
网站建设 2026/7/6 0:16:29

手机拍照片的开挂功能:AI魔法表情,一键就能拯救废片啦!

你是否有过这样的经历&#xff1f;旅行打卡时被阳光晃得眼睛睁不开&#xff0c;朋友聚会合照有人闭眼或表情不佳&#xff0c;小朋友开心的笑容没来得及定格……许多精彩的摄影场景&#xff0c;一张张本该完美的照片因“表情翻车”就此留下遗憾。不用慌&#xff0c;华为手机里图…

作者头像 李华
网站建设 2026/7/11 15:37:57

Meta Llama模型访问权限申请与使用指南

Meta Llama模型访问权限申请与使用指南 【免费下载链接】llama Inference code for LLaMA models 项目地址: https://gitcode.com/gh_mirrors/ll/llama Meta Llama系列大语言模型作为业界领先的开源AI解决方案&#xff0c;其强大的文本生成和推理能力吸引了全球开发者的…

作者头像 李华