当前位置： 首页 > article >正文

手写Promise.all

article 2025/6/8 11:58:21

前言

之前在看远方os大佬直播的时候看到有让手写的Promise.all的问题，然后心血来潮自己准备手写一个

开始

首先，我们需要明确原本js提供的Promise.all的特性

  1. Promise.all返回的是一个Promise
  2. 如果传入的数据中有一个reject即整个all返回的就是reject，且是第一个reject的数据
  3. 如果传入的不是Promise，all会自动用Promise.reslove将其解析成Promise完成状态（重要）
  4. all的函数不一定非要是数组
    那我们用Promise验证一下吧
    image
    image
    image
    以上就是all主要的几个特性了，还有特性后面详细描述

编写代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>Promise.myAll = (data) => {return new Promise((resolve, reject) => {let result = [];let count = 0;const promises = Array.from(data);if (promises.length === 0) {return resolve(result); // 空迭代对象直接 resolve}for (let i = 0; i < promises.length; i++) {Promise.resolve(promises[i]).then((res) => {result[i] = res;count++;if (count === data.length) {resolve(result);}}).catch((err) => {reject(err);});}});};const a = new Promise((resolve) => {setTimeout(() => {resolve(1000);}, 1000);});const b = new Promise((resolve) => {setTimeout(() => {resolve(2000);}, 2000);});const self = "自定义all";Promise.myAll([b, a]).then((res) => {console.log(res, self);});Promise.all([b, a]).then((res) => {console.log(res, "js的all");});Promise.myAll("abc").then((res) => {console.log(res, self);});Promise.all("abc").then((res) => {console.log(res, "js的all");});</script></body>
</html>

我们先看一下执行结果
image
结果是没有问题的，那我们解释一下代码
const promises = Array.from(data); 将数据转成数组，没什么好说的，重点是循环

   for (let i = 0; i < promises.length; i++) {Promise.resolve(promises[i]).then((res) => {result[i] = res;count++;if (count === data.length) {resolve(result);}}).catch((err) => {reject(err);});}

为什么 result[i] = res; count++; if (count === data.length) { resolve(result); } 这样写而不是result.push(res),且比较长度为什么不用i，
解释：其实我们看给的案例中b，a就清楚了，因为Promise.all返回的结果不是执行的顺序，而是你传入的顺序，即不论a的执行结果多快，b的执行多慢，只要传入的是[b,a]，那么返回结果一定是b的结果在前面，如果使用result.push(res)，那么如果b比a慢，就会使a的结果在第一项，b在第二项，因为a先执行完的；
那为什么比较长度不用i呢，我们在for循环打印一下i

  for (let i = 0; i < promises.length; i++) {Promise.resolve(promises[i]).then((res) => {console.log(i);result[i] = res;count++;if (count === data.length) {resolve(result);}}).catch((err) => {reject(err);});}

发现结果i是1 0
image
那如果用i判断，b根本就不会在返回结果里面，所以需要使用额外数据来判断

继续完善代码

这就结束了吗？其实已经算是差不多结束了，但是有一个比较特殊的数据，对象呢，Promise.all如果参数传入的是对象结果是什么呢，那我们调用一下看下吧
image
发现，直接报错了，如果有了解过Symbol.iterator的小伙伴一下子就知道了，对象是没有Symbol.iterator这个方法的，而Promise.all传入的参数必须要有Symbol.iterator方法，字符串，数组 Set和Map是有这个方法的，但是对象没有，所以直接报错；
至于Symbol.iterator方法详解可以看一下我在csdn发布的文章js对象for…of循环，这里就不多做介绍了

那我们把代码完善一下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>Promise.myAll = (data) => {return new Promise((resolve, reject) => {if (data === null || !data[Symbol.iterator]) {reject("错误，无法迭代");return;}let result = [];let count = 0;const promises = Array.from(data);if (promises.length === 0) {return resolve(result); // 空迭代对象直接 resolve}for (let i = 0; i < promises.length; i++) {Promise.resolve(promises[i]).then((res) => {console.log(i);result[i] = res;count++;if (count === data.length) {resolve(result);}}).catch((err) => {reject(err);});}});};const a = new Promise((resolve) => {setTimeout(() => {resolve(1000);}, 1000);});const b = new Promise((resolve) => {setTimeout(() => {resolve(2000);}, 2000);});const self = "自定义all";Promise.myAll([b, a]).then((res) => {console.log(res, self);});Promise.all([b, a]).then((res) => {console.log(res, "js的all");});Promise.myAll("abc").then((res) => {console.log(res, self);});Promise.all("abc").then((res) => {console.log(res, "js的all");});Promise.myAll({}).then((res) => {console.log(res, self);});</script></body>
</html>

Promise.all是直接抛出异常的，我们这里就不抛出异常了
image
结果也是正常的；
那有人就提出了，如果我在对象原型添加了Symbol.iterator这个方法是不是也会正常执行then方法呢，在Promise.all中，如果对象提供了Symbol.iterator他也是可以正常执行不抛出异常的，这个就留个大家自己去实现一下把

总结

以上就是实现Promise.all的一些代码，一开始以为比较简单，但其实真正写起来还是有很多需要注意点的，主要是for循环那一段逻辑，很容易出问题
彩蛋：
image
我自己写完之后给远佬看过，来自远佬的高度评价，哈哈
至于他说的问题其实就是当时for循环添加结果用的是push方法
tips： 远佬可是vue的官方团队成员

相关文章：

手写Promise.all

前言 之前在看远方os大佬直播的时候看到有让手写的Promise.all的问题&#xff0c;然后心血来潮自己准备手写一个 开始 首先&#xff0c;我们需要明确原本js提供的Promise.all的特性 Promise.all返回的是一个Promise如果传入的数据中有一个reject即整个all返回的就是reject&…...

编程日记 2025/6/8 11:58:21

调试器基本原理

调试器基本原理 前言 调试器(debugger)&#xff0c;是一种用于控制其他程序执行流程、监控和修改其他程序状态的软件工具。 调试器通过实时分析程序的执行状态&#xff0c;协助开发者定位代码错误、了解程序工作原理、性能调优及逆向工程等。 1. 调试器核心功能 1.1 控制程…...

编程日记 2025/6/8 11:57:20

2025年6月|注意力机制|面向精度与推理速度提升的YOLOv8模型结构优化研究：融合ACmix的自研改进方案

版本&#xff1a; 8.3.143(Ultralytics YOLOv8框架) ACmix模块原理 在目标检测任务中&#xff0c;小目标&#xff08;如裂缝、瑕疵、零件边缘等&#xff09;由于其尺寸较小、纹理信息稀疏&#xff0c;通常更容易受到图像中复杂背景或噪声的干扰&#xff0c;从而导致漏检或误检…...

编程日记 2025/6/8 11:56:19

JAVA开发代码小工具集合

目录 前言编号生成工具EasyExcel 工具断言工具HTTP 工具字符串 工具验证码生成工具Excel 工具Class 工具Enum 工具分页工具断言工具2IP 地址工具Map 工具 前言 这些工具都是日常开发中能用到的&#xff0c;前后端都有&#xff0c;觉得好用就拿过来了… 编号生成工具 import j…...

编程日记 2025/6/8 11:55:16

利用qcustomplot绘制曲线图

本文详细介绍了qcustomplot绘制曲线图的流程&#xff0c;一段代码一段代码运行看效果。通过阅读本文&#xff0c;读者可以了解到每一项怎么用代码进行配置&#xff0c;进而实现自己想要的图表效果。&#xff08;本文只针对曲线图&#xff09; 1 最简单的图形&#xff08;入门&…...

编程日记 2025/6/8 11:54:12

【基础算法】枚举（普通枚举、二进制枚举）

文章目录 一、普通枚举1. 铺地毯(1) 解题思路(2) 代码实现 2. 回文日期(1) 解题思路思路一&#xff1a;暴力枚举思路二&#xff1a;枚举年份思路三&#xff1a;枚举月日 (2) 代码实现 3. 扫雷(2) 解题思路(2) 代码实现 二、二进制枚举1. 子集(1) 解题思路(2) 代码实现 2. 费解的…...

编程日记 2025/6/8 11:53:04

智能对联网页小程序的仓颉之旅

#传统楹联遇上AI智能体&#xff1a;我的Cangjie Magic开发纪实 引言&#xff1a;一场跨越千年的数字对话 "云对雨&#xff0c;雪对风&#xff0c;晚照对晴空"。昨天晚上星空璀璨&#xff0c;当我用仓颉语言写下第一个智能对联网页小程序的Agent DSL代码时&#xff0…...

编程日记 2025/6/8 11:51:55

Go字符串切片操作详解：str1[:index]

在Go语言中&#xff0c;return str1[:index] 是一个​​字符串切片操作​​&#xff0c;它截取字符串的一部分。让我们深入解析这个操作的含义和原理&#xff1a; 基本语法和含义 str1&#xff1a;原始字符串[:index]&#xff1a;切片操作符str1[:index]&#xff1a; ​​起始…...

编程日记 2025/6/8 11:50:50

JavaScript 本地存储 (localStorage) 完全指南

文章目录 JavaScript 本地存储 (localStorage) 完全指南 &#x1f510;一、什么是 localStorage&#xff1f;&#x1f4a1;二、如何使用 localStorage&#xff1f;&#x1f527;1. 存储数据2. 读取数据3. 删除数据4. 清空所有数据 三、存储对象和数组的技巧 &#x1f3a8;1. 存…...

编程日记 2025/6/8 11:49:47

从golang的sync.pool到linux的slab分配器

最近学习golang的时候&#xff0c;看到golang并发编程中有一个sync.pool&#xff0c;即对象池&#xff0c;猛地一看这不跟linux的slab分配器类似嘛&#xff0c;赶紧学习记录下 这里先总结下设计sync.pool和slab的目的 sync.pool 为了缓解特定类型的对象频繁创建和销毁&#x…...

编程日记 2025/6/8 11:48:46

Python分形几何可视化—— 复数迭代、L系统与生物分形模拟

Python分形几何可视化—— 复数迭代、L系统与生物分形模拟 本节将深入探索分形几何的奇妙世界&#xff0c;实现Mandelbrot集生成器和L系统分形树工具&#xff0c;并通过肺部血管分形案例展示分形在医学领域的应用。我们将使用Python的NumPy进行高效计算&#xff0c;结合Matplo…...

编程日记 2025/6/8 11:47:44

【超详细】英伟达Jetson Orin NX-YOLOv8配置与TensorRT测试

文章主要内容如下&#xff1a; 1、基础运行环境配置 2、Torch-GPU安装 3、ultralytics环境配置 4、Onnx及TensorRT导出详解 5、YOLOv8推理耗时分析 基础库版本&#xff1a;jetpack5.1.3, torch-gpu2.1.0, torchvision0.16.0, ultralytics8.3.146 设备的软件开发包基础信息 需…...

编程日记 2025/6/8 11:46:43

Go语言学习--＞项目中引用第三方库方式

Go语言学习–&#xff1e;项目中引用第三方库方式 1 执行 go mod tidy 分析引入的依赖有没有正常放在go.mod里面 找到依赖的包会自动下载到本地 并添加在go.mod里面 执行结果&#xff1a; 2 执行go get XXXX&#xff08;库的名字&#xff09;...

编程日记 2025/6/8 11:45:41

Vue Fragment vs React Fragment

文章目录 前言&#x1f9e9; 一、概念对比&#xff1a;Vue Fragment vs React Fragment&#x1f4e6; 二、使用示例对比✅ Vue 3 中使用 Fragment✅ React 中使用 Fragment &#x1f50d; 三、差异解析1. **使用方式**2. **传递属性&#xff08;如 key&#xff09;**3. **插槽系…...

编程日记 2025/6/8 11:44:40

【LRU】 (最近最少使用)

LRU (最近最少使用) 文章目录 LRU (最近最少使用)一、LRU是什么&#xff1f;二、实现1.常规算法2.双栈更替总结 一、LRU是什么&#xff1f; LRU&#xff08;Least Recently Used&#xff09;是一种常见的缓存淘汰策略&#xff0c;核心思想是 “淘汰最长时间未被使用的缓存数据…...

编程日记 2025/6/8 11:43:39

每日Prompt：云朵猫

提示词 仰视&#xff0c;城镇的天空&#xff0c;一片形似猫咪的云朵&#xff0c;用黑色的简笔画&#xff0c;勾勒出猫咪的形状&#xff0c;可爱&#xff0c;俏皮&#xff0c;极简...

编程日记 2025/6/8 11:42:37

AI浪潮下的IT行业：威胁、转变与共生之道

目录 前言1 AI在IT行业的具体应用场景1.1 软件开发中的AI助手1.2 运维与监控的智能化1.3 测试自动化与质量保障1.4 安全防护中的智能威胁识别 2 AI对IT从业者的实际影响2.1 工作内容的结构性变化2.2 技能结构的再平衡 3 IT从业者不可替代的能力与价值3.1 复杂系统的架构与抽象能…...

编程日记 2025/6/8 11:41:32

基于功能基团的3D分子生成扩散模型 - D3FG 评测

D3FG 是一个在口袋中基于功能团的3D分子生成扩散模型。与通常分子生成模型直接生成分子坐标和原子类型不同&#xff0c;D3FG 将分子分解为两类组成部分&#xff1a;官能团和连接体&#xff0c;然后使用扩散生成模型学习这些组成部分的类型和几何分布。 一、背景介绍 D3FG 来源…...

编程日记 2025/6/8 11:40:28

Python Cookbook-7.12 在 SQLite 中储存 BLOB

任务 想将 BLOB 存入一个 SQLite 数据库, 解决方案 Python的 PySQLite 扩展提供了 sqlite.encode 函数,它可帮助你在 SOLite 数据库中插入二进制串。可以基于这个函数编写一个小巧的适配器类: import sqlite,cPickle class Blob(object):自动转换二进制串def __init__(self…...

编程日记 2025/6/8 11:39:25

蓝耘服务器与DeepSeek的结合：引领智能化时代的新突破

&#x1f31f; 嗨&#xff0c;我是Lethehong&#xff01;&#x1f31f; &#x1f30d; 立志在坚不欲说&#xff0c;成功在久不在速&#x1f30d; &#x1f680; 欢迎关注&#xff1a;&#x1f44d;点赞⬆️留言收藏&#x1f680; &#x1f340;欢迎使用&#xff1a;小智初学…...

编程日记 2025/6/8 11:38:22

无人机光纤FC接口模块技术分析

运行方式 1. 信号转换&#xff1a;在遥控器端&#xff0c;模块接收来自遥控器主控板的电信号。 2.电光转换&#xff1a;模块内部的激光发射器将电信号转换成特定波长的光信号。 3.光纤传输&#xff1a;光信号通过光纤跳线传输。光纤利用全内反射原理将光信号约束在纤芯内进行…...

编程日记 2025/6/8 11:37:15

【LeetCode】3170. 删除星号以后字典序最小的字符串（贪心 | 优先队列）

LeetCode 3170. 删除星号以后字典序最小的字符串&#xff08;中等&#xff09; 题目描述解题思路java代码 题目描述 题目链接&#xff1a;3170. 删除星号以后字典序最小的字符串 给你一个字符串 s 。它可能包含任意数量的 * 字符。你的任务是删除所有的 * 字符。 当字符串还…...

编程日记 2025/6/8 11:36:09

Oracle 用户名大小写控制

Oracle 用户名大小写控制 在 Oracle 数据库中&#xff0c;用户名的默认大小写行为和精确控制方法如下&#xff1a; 一 默认用户名大小写行为 不引用的用户名&#xff1a;自动转换为大写 CREATE USER white IDENTIFIED BY oracle123; -- 实际创建的用户名是 "WHITE"…...

编程日记 2025/6/8 11:35:05

作为过来人，浅谈一下高考、考研、读博

写在前面 由于本人正在读博&#xff0c;标题中的三个阶段都经历过或正在经历&#xff0c;本意是闲聊&#xff0c;也算是给将要经历的读者们做个参考、排雷。本文写于2022年&#xff0c;时效性略有落后&#xff0c;不过逻辑上还是值得大家参考&#xff0c;若所述存在偏颇&#…...

编程日记 2025/6/8 11:34:01

立志成为一名优秀测试开发工程师(第十一天)—Postman动态参数/变量、文件上传、断言策略、批量执行及CSV/JSON数据驱动测试

目录 一、Postman接口关联与正则表达式应用 1.正则表达式解析 2.提取鉴权码。 二、Postman内置动态参数以及自定义动态参数 1.常见内置动态参数&#xff1a; 2.自定义动态参数&#xff1a; 3.“编辑”接口练习 三、图片上传 1.文件的上传 2.上传后内容的验证 四、po…...

编程日记 2025/6/8 11:31:26

Global Security Market知识点总结：主经纪商业务

在全球证券市场的复杂体系中&#xff0c;主经纪商业务&#xff08;Prime Brokerage&#xff09;占据着独特且关键的位置。这一业务为大型机构投资者提供了一系列至关重要的服务&#xff0c;极大地影响着金融市场的运作与发展。 一、主经纪商业务的定义 主经纪商业务是投资银行…...

编程日记 2025/6/8 11:30:23

算法练习-回溯

今天开始新的章节&#xff0c;关于算法中回溯法的练习&#xff0c;这部分题目的难度还是比较大的&#xff0c;但是十分锻炼人的思维与思考能力。 处理这类题目首先要注意几个基本点&#xff1a; 1.关于递归出口的设置&#xff0c;这是十分关键的&#xff0c;要避免死循环的产…...

编程日记 2025/6/8 11:28:14

AI代码助手需求说明书架构

AI代码助手需求说明书架构 #mermaid-svg-6dtAzH7HjD5rehlu {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-6dtAzH7HjD5rehlu .error-icon{fill:#552222;}#mermaid-svg-6dtAzH7HjD5rehlu .error-text{fill:#552222;s…...

编程日记 2025/6/8 11:25:56

PTC过流保护器件工作原理及选型方法

PTC过流保护器件 ‌&#xff08;Positive Temperature Coefficient&#xff0c;正温度系数热敏电阻&#xff09;是一种过流保护元件&#xff0c;其工作原理基于电阻值随温度变化的特性。当电路正常工作时&#xff0c;PTC的阻值很小&#xff0c;电流可以顺畅通过&#xff1b;但当…...

编程日记 2025/6/8 11:23:30

RabbitMQ 在解决数据库高并发问题中的定位和核心机制

RabbitMQ 在解决数据库高并发问题中的定位和核心机制 它是间接但极其有效的解决方案&#xff0c;以下内容聚焦如何最大化发挥 RabbitMQ 的潜力&#xff1a; 一、核心机制落地强化方案 1. 精准的异步化切割 关键原则&#xff1a;区分 “必须同步” 和 “可异步” 操作 #merma…...

编程日记 2025/6/8 11:22:28