当前位置: 首页 > news >正文

手写JavaScript中的Promise.all方法(JS中Promise.all的执行过程)

简介:

  • Promise.all是JavaScript中一种用于处理多个Promise对象的方法,该方法接收一个数组作为参数,并返回一个新的Promise对象。

  • 这个新的对象会在所有Promise对象都成功解析后解析,解析的结果是一个数组,包含了所有Promise对象解析后的结果。

  •  解析时如果任何一个Promise对象失败,则这个新的Promise实例会立即失败,并返回第一个失败的Promise对象的错误信息。

  • Promise.all不会改变原有的Promise对象的状态,原有的 Promise 对象仍会按照自己的状态(fulfilled或rejected)进行解析。

那么Promise.all的具体实现过程是怎样的?今天来记录学习下,话不多说,直接上代码和注释,

// 手写Promise.all方法
Promise.myPromiseAll = function (props) {// 这里定义res、rej变量,在Promsie内部赋值,// 这样外部就可以直接调用res()、rej()方法let res, rej;// 这里定义promise1,用于最后返回最终状态const promise1 = new Promise((resolve, reject) => {res = resolve;rej = reject;});//定义i 表示Promise对象的数量let i = 0;// 定义result 用于存储每个成功Promise的结果const result = [];//定义fulfilled 用于追踪已完成的Promise数量let fulfilled = 0;// 这里不能使用.length判断props数组长度,因为他有可能是一些别的可迭代对象,// 所以这里使用for of循环Promise的参数props,for of可以循环任意的可迭代对象for (const item of props) {// 这里保存的数据下标index,用于赋值成功后的data数据,形成闭包环境const index = i;// 这里每循环一次i加1,表示Promise数量i++;// 这里循环拿到的不一定是一个Promise,所以使用Promise.resolve包装一下,// 然后处理成功和失败的状态Promise.resolve(item).then((data) => {// 这里需要考虑到Promise成功时需要做到什么?1、2、// 1、完成的数据汇总到一个数组,最终结果// 在上面定义result,于存储每个成功Promise的结果,// 这里不能使用push方法,因为我们需要返回的数据是传递的顺序,不是完成的顺序// 所以这里根据下标赋值成功后的data数据result[index] = data;// 2、判定是否全部完成// 这里在上面定义fulfilled,记录每次完成fulfilled数量加1fulfilled++;// 这里判断fulfilled完成的数量和Promise数量相等时表示结束,// 把数据result给resif (fulfilled === i) { res(result); }// 这里如果失败,直接调用失败的方法,因为状态一旦确定就无法更改}, rej)// 因为这里是异步代码,运行时循环已经结束,所以i代表的一定是整体的数量}// 这里循环完成,判断i如果等于0,表示没有传递任何Promise参数// 直接给一个空数组if (i === 0) { res([]); }// 最后直接返回最终状态promise1return promise1;
}Promise.myPromiseAll([]).then((res) => {console.log(res);
}, (err) => {console.log("err", err);
})
// 输出 []Promise.myPromiseAll([1, 2, 3]).then((res) => {console.log(res);
}, (err) => {console.log("err", err);
})
// 输出 [1, 2, 3]Promise.myPromiseAll([1, 2, 3, Promise.reject(456)]).then((res) => {console.log(res);
}, (err) => {console.log("error", err);
})
// 输出 error 456Promise.myPromiseAll([1, 2, 3, Promise.resolve(456)]).then((res) => {console.log(res);
}, (err) => {console.log("err", err);
})
// 输出 [ 1, 2, 3, 456 ]

http://www.lryc.cn/news/307257.html

相关文章:

  • IP设置教程
  • 【Azure 架构师学习笔记】-Azure Synapse -- Link for SQL 实时数据加载
  • k8s(5)
  • 【服务器数据恢复】ext3文件系统下硬盘坏道掉线的数据恢复案例
  • Sentinel 动态规则扩展
  • UE5 UE4 自定义插件自动开启关联插件(plugin enable)
  • Android摄像头横屏的时候_人脸预览横向显示_问题解决---Android原生开发工作笔记164
  • 网络安全防御保护 Day6
  • 自动驾驶消息传输机制-LCM
  • 架构设计实践:熟悉架构设计方法论,并动手绘制架构设计图
  • 【推荐算法系列十六】:协同过滤
  • linux动态库加载相关
  • python 基础绘图函数 实例
  • 28. 找出字符串中第一个匹配项的下标(力扣LeetCode)
  • 1 开源鸿蒙OpenHarmony niobe407 STM32F407IGT6芯片轻型系统全量源码4.1版本下载流程
  • 洛谷C++简单题小练习day21—梦境数数小程序
  • LabVIEW高精度闭式微小型循环泵性能测试
  • 同局域网共享虚拟机(VMware)
  • docker学习快速入门
  • 大语言模型LLM推理加速:LangChain与ChatGLM3-6B的推理加速技术(LLM系列11)
  • GSVA -- 学习记录
  • 基于Springboot的旅游网管理系统设计与实现(有报告)。Javaee项目,springboot项目。
  • Docker基础篇(六) dockerfile体系结构语法
  • 【Python编程+数据清洗+Pandas库+数据分析】
  • 网络安全之防御保护8 - 11 天笔记
  • LiveGBS流媒体平台GB/T28181功能-查看国标设备下通道会话列表直播|回放|对讲|播放|录像|级联UDP|TCP|H264|H265会话
  • Python和Jupyter简介
  • Linux——静态库
  • fastjson序列化MessageExt对象问题(1.2.78之前版本)
  • osi模型,tcp/ip模型(名字由来+各层介绍+中间设备介绍)