#yyds干货盘点#【Promise 源码学习】第十二篇 – Promise.race 的实现

theme: fancy 「这是我参与11月更文挑战的第5天,活动详情查看:[2021最后一次更文挑战](https://juejin.cn/post/7023643374569816095/ "https://juejin.cn/post/7023643374569816095/")」。 一,前言 上一篇,主要实现 Promise 的核心静态 API(类方法):Promise.all,主要涉及以下几个点: 测试原生 Promise.all 的使用; Promise.all 的功能与特性分析; Promise.all 的源码实现、执行分析、功能测试; 本篇,继续实现 Promise 静态 API(类方法):Promise.race; 备注: Promise.race 与 Promise.all 实现原理相似;有了 all 的基础 race 就非常简单了; Promise.race 面试高频考察点,主要用于解决超时中断问题; 二,Promise.race 简介 1,API 介绍 race:译为“比赛”、“赛跑”;MDN 参考资料 Promise.race功能(与 Promise.all 对比): Promise.all: - 批处理 promise,返回 promise; - 全部成功才成功,返回全部结果; - 一个出错就失败,返回第一个失败结果; Promise.race: - 批处理 promise,返回 promise; - 无论成功还是失败,谁快就返回谁; 2,原生 Promise.race 功能测试 let p1 = new Promise((resolve, reject) => { setTimeout(() => { console.log("Promise 执行完成:成功") resolve('success') }, 1000); }) let p2 = new Promise((resolve, reject) => { setTimeout(() => { console.log("Promise 执行完成:失败") reject('fail') }, 3000); }) Promise.race([p1, p2]).then((data) => { console.log('then', data); }).catch((err) => { console.log('catch', err); }) // 执行结果: // 1 秒后打印“Promise 执行完成:成功” + “then success”; // 3 秒后打印“Promise 执行完成:失败”; 备注: 虽然Promise.race在 1 秒后就返回了结果,但实际一共执行了 3 秒才完成; 如果数组传入数字,会直接返回成功; 三,Promise.race 实现 1,原理分析 Promise.race:入参是一个 promise 集合;返回一个 Promise 实例; Promise.race 内部 return new Promise(...) 执行所有 promise,使用最先返回的结果(不管成功还是失败); p.then(resolve, reject) 就看谁先进入 then; 2,代码实现 static race (promises) { return new Promise((resolve, reject)=>{ for(let i = 0; i { // 拿到 p 的 reject,以便于随时更新 p 的状态 abort = reject; }) // Promise.race:相当于给 p1 绑了一个定时炸弹 p let p2 = Promise.race([p, p1]); p2.abort = abort;// p2 就获得炸弹的遥控器 return p2; } 超时了,就直接引爆: let p1 = new Promise((resolve, reject)=>{ abort = reject; setTimeout(() => { resolve('成功') }, 3000); }) let p2 = wrap(p1); p2.then((data)=>{ console.log('then', data) },(err)=>{ console.log('err', err) }) setTimeout(() => { p2.abort('已超时') }, 1000); // 执行结果:1 秒后输出"err 已超时",3 秒全部执行完成 五,结尾 本篇,主要实现了 Promise 静态 API(类方法):Promise.race,主要涉及以下几个点: 测试原生 Promise.race 的使用; Promise.race 的功能与特性分析; Promise.race 的源码实现、执行分析、功能测试; 下一篇,继续 Promise 静态 API:Promise.allSettled 和 Promise.any; 维护记录 20211106 - 添加 Promise.race 应用;(仍需完善)

提供全面的网站源码学习交流,小程序、APP、H5、支付、游戏、区块链、商城、直播、影音、小说、公众号等源码学习交流。
精品源码资源网 » #yyds干货盘点#【Promise 源码学习】第十二篇 – Promise.race 的实现
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡