JS手写实现Promise.race

news2025/10/31 7:32:23

在这里插入图片描述
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"。