公众号:Code程序人生,分享前端所见所闻。
Promise.race()
是一个常见的 JavaScript Promise
方法,它接受一个 Promise
数组作为参数,并返回一个新的 Promise
对象。这个新的 Promise
对象在传入的 Promise
数组中,任意一个 Promise
对象状态变为 fulfilled
或者 rejected
,它就会采用这个 Promise
对象的状态作为自己的状态,并返回它的结果或错误原因。
本文将介绍如何手写实现一个简单的 Promise.race()
函数。
实现步骤
- 创建一个空的数组
results
,它用来保存每个Promise
对象的结果或错误原因。 - 遍历传入的
Promise
数组,对于每个Promise
对象,添加一个then()
方法,将它的结果或错误原因保存到results
数组中,并将其状态设置为fulfilled
。 - 对于任意一个
Promise
对象的状态变为fulfilled
或者rejected
,返回一个新的Promise
对象,并采用这个Promise
对象的状态作为自己的状态,并返回它的结果或错误原因。
下面是完整的实现代码:
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
Promise.resolve(promises[i]).then(resolve).catch(reject)
}
})
}
使用示例
我们可以通过以下示例来测试刚才实现的 race()
函数:
const promise1 = new Promise(resolve => setTimeout(() => resolve('foo'), 3000));
const promise2 = new Promise(resolve => setTimeout(() => resolve('bar'), 2000));
const promise3 = new Promise((resolve, reject) => setTimeout(() => reject('baz'), 1000));
promise.race([promise1, promise2, promise3])
.then(result => console.log(result)) // 输出 "baz"
.catch(error => console.error(error)); // 输出 "baz"
上面的示例中,我们创建了三个 Promise
对象,它们的状态分别为 pending
,并分别在不同的时间内变为了 fulfilled
或者 rejected
。然后我们传入这三个 Promise
对象到 race()
函数中,并通过 then()
和 catch()
方法来处理最终的结果或错误原因。由于 promise3
对象的状态最先变为了 rejected
,因此最终的输出结果为 "baz"
。
总结
Promise.race()
是一个非常实用的 Promise
方法,它可以让我们同时运行多个异步操作,并返回最先完成的操作的结果或错误原因。本文通过手写实现的方式,介绍了一个简单的 race()
函数的实现过程,并通过一个示例来演示它的使用。