手写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"); // 改变状态为失败 reject
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"); // 改变状态为失败 reject
let p3 = Promise.resolve("333");
let result = Promise.race([p1, p2, p3]); // 参数为 promise 对象组成的数组
console.log(result);

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

Promise.race 的功能点：

返回一个 promise 对象；
返回的 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)
			})
		}
	})
}

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

猜你喜欢