手写promise原理系列九:封装Promise.race方法,Promise.race的用法

在这里插入图片描述

小伙伴们,你们好,本篇为"手写promise原理系列" 最后一篇文章了,虽然 promise 我们已经学习了很多,但是在异步编程的道路上,任重而道远,后面我会单独出一篇文章来探讨一下一种更好的异步实践方式 async/await 的使用方法。

当前章节探讨一下 Promise.race 方法的用法以及封装。

race 单词的释义我们可以知道是 比赛、赛跑 的意思,其实就是看哪个 promise 对象优先执行,返回优先执行的 promise 对象的结果,不管结果是成功还是失败。口号就是:不求最好,只求最快

来看 Promise.race 的使用方式:

let p1 = new Promise((resolve, reject) => {
	resolve("111");
});
let p2 = Promise.resolve("222");
let p3 = Promise.resolve("333");
let result = Promise.race([p1, p2, p3]); // 参数为 promise 对象组成的数组
console.log(result);

在这里插入图片描述
上面 resolve("111") 最先执行,所以返回结果为 "111"

来看下面这种异步执行的方式:

let p1 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve("111");
	})
});
let p2 = Promise.resolve("222");
let p3 = Promise.resolve("333");
let result = Promise.race([p1, p2, p3]); // 参数为 promise 对象组成的数组
console.log(result);

在这里插入图片描述
上面代码中,resolve("111") 变为了异步执行,所以此时最先执行的为 resolve("222");所以结果返回 "222"

来看失败的示例:

let p1 = new Promise((resolve, reject) => {
	reject("111");
});
let p2 = Promise.resolve("222");
let p3 = Promise.resolve("333");
let result = Promise.race([p1, p2, p3]); // 参数为 promise 对象组成的数组
console.log(result);

在这里插入图片描述
reject("111") 执行时,当前 promise 对象的状态变为了失败,所以就直接返回了。

Promise.race 的功能点

  1. 返回一个 promise 对象;
  2. 返回的 promise 对象的状态结果为数组中优先执行的 promise 对象的状态结果。

Promise.race 方法的封装代码

Promise.race = function (promiseArray) {
	// 返回一个 promise 对象
	return new Promise((resolve, reject) => {
		// 按优先级顺序执行 promise 对象,直接返回最先执行完成的 promise 对象的结果
		for (let i = 0; i < promiseArray.length; i++) {
			let p = promiseArray[i];
			p.then(value => {
				resolve(value);
			}, reason => {
				reject(reason)
			})
		}
	})
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值