挣扎于 Promise.race() 实现

Question

我看到了以下 Promise.race() 的实现。

我发现很难理解它是如何工作的。

const race = function(promisesArray) {
  return new Promise((resolve, reject) => {
    promisesArray.forEach((innerPromise) => {
      Promise.resolve(innerPromise)
        .then(resolve, reject) 
        .catch(reject);
    });
  });
};

第一部分：以下说法正确吗？

Promise.resolve(innerPromise) 将始终以 innerPromise 为值返回已解决的 promise 并且因为它总是解决，所以我将始终以 in.then 块结束。

第二部分：

我在解释中读到 resolve 和 reject passed to.then 块将在 innerPromise 的解析中被调用。 为什么？，不应该像 Promise.resolve(innerPromise) 总是解决，总是第一个回调 of.then 块应该被调用？

我想我缺少一些非常基本的东西。 我试图找到解决方案，但无法找到消除我疑虑的解释。

Answer 1

该代码中Promise.resolve的目的是允许数组的元素不是承诺。 它们可以是任意的 thenables，或者它们可以只是常规值（它们确实会成为已实现的承诺）。

 const existingValue = 5; const existingPromise = Promise.reject(new Error("blah")); const existingThenable = { then() { console.log("never going to resolve >:)"); } }; Promise.race([existingValue, existingPromise, existingThenable]).then( value => { console.log("got a value", value); }, error => { console.log("got an error", error); }, );

第一部分：以下说法正确吗？

Promise.resolve(innerPromise) 将始终以 innerPromise 为值返回已解决的 promise 并且因为它总是解决，所以我将始终以 in.then 块结束。

如果您尝试从上面传递给Promise.race的数组中删除existingValue ，您会看到Promise.resolve不一定返回已解析的 promise； 具体来说，当它通过 promise 或其他可用时，它返回一个 promise 以相同的方式结算（尽管当通过相同类型的 promise 时，它实际上通过返回相同的 promise 对象来满足该义务）。 所以不，这不是真的。 我认为这也回答了第 2 部分。

此外，尽管您没有提出来：我很确定额外的.catch(reject)是无法访问/无用的，至少对于标准 ES Promise实现而言是这样。

Answer 2

Promise.resolve(anotherPromise)将始终假定 anotherPromise 的anotherPromise ，因此如果anotherPromise被拒绝，那么来自Promise.resolve()的那个也将被拒绝。 或者，如果anotherPromise已实现，则Promise.resolve()也将以其值实现。

 const rejectedPromise = Promise.reject("boom"); Promise.resolve(rejectedPromise).then(result => console.log("success:", result)).catch(error => console.log("failure:", error));

请参阅有关Promise.resolve()的 MDN 文档。

至于为什么代码是使用Promise.resolve()而不是直接

innerPromise
    .then(resolve, reject) 
    .catch(reject);

当输入不一定是 promise 时， Promise.resolve()很有用。它可以将普通值转换为 promise 或任意 thenable（可能是另一个 promise 实现）转换为香草 JavaScript promise，从而允许统一处理结果。

也许这是防御性编码，或者只是允许调用race(asyncResult, 42) 。 意图不明确。

---

into执行器function的resolve或reject参数重复调用时noop。 promise 可以达到单个最终 state - 之后调用resolve / reject无效。 因此，从整个数组中，第一个 promise 离开未决的 state 将决定 promise 构造函数将被解析为什么。

 const p1 = new Promise((resolve, reject) => { Promise.resolve("p1 success").then(resolve, reject).catch(reject); Promise.reject("p1 failure").then(resolve, reject).catch(reject); }); const p2 = new Promise((resolve, reject) => { Promise.reject("p2 failure").then(resolve, reject).catch(reject); Promise.resolve("p2 success").then(resolve, reject).catch(reject); }); const p3 = new Promise((resolve, reject) => { Promise.resolve("p3 hello").then(resolve, reject).catch(reject); Promise.resolve("p3 world").then(resolve, reject).catch(reject); }); const p4 = new Promise((resolve, reject) => { Promise.reject("p4 foo").then(resolve, reject).catch(reject); Promise.reject("p4 bar").then(resolve, reject).catch(reject); }); p1.then(console.log, console.error); p2.then(console.log, console.error); p3.then(console.log, console.error); p4.then(console.log, console.error);

因此，通过循环并将相同的resolve和reject附加到所有 promise， race只会以与第一个 promise 相同的结果来解决。 这与Promise.race()的 JavaScript 实现相匹配：

返回值

一个 Promise 与iterable中第一个 promise 的最终 state异步结算以结算。 换句话说，如果第一个结算的promise被履行，它就履行；如果第一个结算的promise被拒绝，它就拒绝。 如果传递的iterable为空，则返回的 promise 将永远挂起。 如果传递的iterable对象非空但不包含未决承诺，则返回的 promise 仍然是异步（而不是同步）结算的。

NB iterable是Promise.race()的输入。 它匹配race()的promisesArray 。

---

尽管如此，以下构造似乎完全是多余的：

p
  .then(resolve, reject) 
  .catch(reject);

.then .then()的第二个参数是 onRejected 回调。 因此，如果p被拒绝， .then()的第二个参数将用于处理它。 额外的.catch()将处理来自 .then( .then()中resolve或reject的错误

 Promise.resolve("foo").then( result => { throw `Fulfilled with ${result}. Throwing after success.` }, error => {throw `Fulfilled with ${error}. Throwing after error` } ).catch(errorFromThen => console.log(`Error in.catch() is: ${errorFromThen}`)); Promise.reject("bar").then( result => { throw `Fulfilled with ${result}. Throwing after success.` }, error => {throw `Fulfilled with ${error}. Throwing after error` } ).catch(errorFromThen => console.log(`Error in.catch() is: ${errorFromThen}`));

然而，执行者 function 的resolve和reject都不能在普通的 Promise 构造函数中抛出/拒绝。

 //more verbose onError and.catch() handlers in order to showcase what gts shown or not const p = new Promise((resolve, reject) => { Promise.reject("hello").then( resolve, error => { console.log("inside the onReject in.then()", error); return reject(error); }).catch(error => { console.log("inside the.catch()", error); return reject(error); }); Promise.reject("world").then( resolve, error => { console.log("inside the onReject in.then()", error); return reject(error); } ).catch(error => { console.log("inside the.catch()", error); return reject(error); }); }); p.then(console.log, console.error);

因此不使用额外的.catch() 。

---

总体而言， race()的行为类似于 vanilla JavaScript Promise.race() 。 唯一的主要区别是Promise.race()接受任何可迭代对象，而race()仅处理 arrays。

 const delay = (ms, value) => new Promise(resolve => setTimeout(resolve, ms, value)); const array = [delay(300, "a"), delay(100, "b"), delay(200, "c")]; const iterable = array.values(); Promise.race(iterable).then(result => console.log(`First to fulfil was ${result}`));

 const race = function(promisesArray) { return new Promise((resolve, reject) => { promisesArray.forEach((innerPromise) => { Promise.resolve(innerPromise).then(resolve, reject).catch(reject); }); }); }; const delay = (ms, value) => new Promise(resolve => setTimeout(resolve, ms, value)); const array = [delay(300, "a"), delay(100, "b"), delay(200, "c")]; const iterable = array.values(); race(iterable).then(result => console.log(`First to fulfil was ${result}`)).catch(console.error);