JavaScript Promise.any() 方法与 Promise.race() 方法有何不同

在这篇文章中，我们首先将尝试理解如何声明或使用 Promise.any() 和 Promise.race() 方法，然后通过一些事实来帮助我们理解它们的区别（通过理论和编码示例）。

让我们首先简要了解一下这两种方法，然后再了解它们的声明语法。

Promise.any() 方法： 此方法返回一个 Promise，一旦我们传入的可迭代对象（如数组）中的任何一个 Promise 成功完成或解决，该 Promise 就会实现或拒绝。

Promise.any() 方法的语法： 我们可使用以下语法来声明该方法。

Promise.any([promise_1 , promise_2 , ... ]). then(
    // do something...
)

Promise.race() 方法： 此方法返回一个Promise，该Promise在迭代对象数组中的任何一个Promise成功执行或解决时尽快履行或拒绝，返回该Promise的值或原因。

Promise.race() 方法的语法： 以下语法可用于声明此方法。

Promise.race([promise_1 , promise_2 , ... ]). then(
    // do something...
)

现在，我们已经简要理解了这两种方法，并且还了解了它们的声明语法，现在让我们跳转到下面的另一个部分，我们将看到它们如何实际上有所不同，并且我们将通过一些理论和一些编码示例来理解。

它们如何不同？

以下几点将帮助我们理解它们实际上有何不同：

1. 如果传递的promise（作为输入）中有一个处于rejected状态：

• Promise.any() 方法将接受该已拒绝的promise，并进一步检查其他传递的promise，如果找到某个被解决的promise，则返回其数据作为输出。
• Promise.race() 方法将接受该已拒绝的promise，并且不会进一步检查其他传递的promise，并最终返回一个错误消息，该消息作为数据传递给已拒绝的promise。

  2. 如果所有传递的promises（作为输入）都处于rejected状态：

• Promise.any() 方法将接受所有已拒绝状态的promises，并返回一个特殊的错误，称为聚合错误，这意味着所有传递的promises实际上都处于被拒绝状态。

• Promise.race() 方法将接受所有已拒绝状态的promises，并在检查第一个已拒绝状态的promise之后，甚至不再进一步检查其他已拒绝状态的promises，它将返回包含在第一个已拒绝状态promise的reject()方法中传递的数据的错误。

现在，我们已经对它们实际上有何不同有了一些理论解释，现在是时候通过一些以下实例来可视化上述说明的事实了：

示例1： 在此示例中，我们将在这两种方法中将几个已解决状态的promises作为输入参数（作为数组的元素）传递，并可视化它们的输出。

Javascript

<script> 
    let first_resolved_promise = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve("Resolved after 1 second"); 
        }, 1000); 
    }); 
  
    let second_resolved_promise = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve("Resolved after 2 seconds"); 
        }, 2000); 
    }); 
  
    let third_resolved_promise = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve("Resolved after 3 seconds"); 
        }, 3000); 
    }); 
  
    try { 
        let result_1 = Promise.any([ 
            first_resolved_promise, 
            second_resolved_promise, 
            third_resolved_promise, 
        ]); 
  
        result_1.then((data) => console.log("Any's data: " + data)); 
  
        let result_2 = Promise.race([ 
            first_resolved_promise, 
            second_resolved_promise, 
            third_resolved_promise, 
        ]); 
  
        result_2.then((data) => console.log("Race's data: " + data)); 
    } catch (error) { 
        console.log(error); 
    } 
</script>

输出： 两种方法的输出结果相同，因为对于所有已解析的promise，这两种方法都会被视为相同，因为无论哪个promise先解析，都会首先执行，其余的promise则保持未执行状态。

Any's data: Resolved after 1 second
Race's data: Resolved after 1 second

示例2： 在这个示例中，我们将一个被拒绝的状态的promise作为输入参数传递，并可视化它们的输出。

JavaScript

<script> 
    let rejected_promise = new Promise((resolve, reject) => { 
        reject("Rejected Promise....."); 
    }); 
  
    let first_resolved_promise = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve("Resolved after 1 second"); 
        }, 1000); 
    }); 
  
    let second_resolved_promise = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve("Resolved after 2 seconds"); 
        }, 2000); 
    }); 
  
    try { 
        let result_1 = Promise.any([ 
            rejected_promise, 
            first_resolved_promise, 
            second_resolved_promise, 
        ]); 
  
        result_1.then((data) => console.log("Any's data: " + data)); 
  
        let result_2 = Promise.race([ 
            rejected_promise, 
            first_resolved_promise, 
            second_resolved_promise, 
        ]); 
  
        result_2.then((data) => console.log("Race's data: " + data)); 
    } catch (error) { 
        console.log(error); 
    } 
</script>

输出： Race的数据将被拒绝，因为它无法接受被拒绝的Promise，并最终也会忽略其他成功解决的Promise的数据。另一方面，Any的数据将成功执行。

Uncaught (in promise) Rejected Promise.....
Any's data: Resolved after 1 second

示例3: 在这个示例中，我们将把所有被拒绝的状态的承诺传递给这两个方法，并可视化它们的各自输出。

Javascript

<script> 
    let first_rejected_promise = new Promise((resolve, reject) => { 
        reject("First Rejected Promise....."); 
    }); 
  
    let second_rejected_promise = new Promise((resolve, reject) => { 
        reject("Second Rejected Promise..."); 
    }); 
  
    let third_rejected_promise = new Promise((resolve, reject) => { 
        reject("Third Rejected Promise...."); 
    }); 
  
    try { 
        let result_1 = Promise.any([ 
            first_rejected_promise, 
            second_rejected_promise, 
            third_rejected_promise, 
        ]); 
  
        result_1.then((data) => console.log("Any's data: " + data)); 
  
        let result_2 = Promise.race([ 
            first_rejected_promise, 
            second_rejected_promise, 
            third_rejected_promise, 
        ]); 
  
        result_2.then((data) => console.log("Race's data: " + data)); 
    } catch (error) { 
        console.log(error); 
    } 
</script>

输出： 两个promise都将返回一个错误消息，但这两个错误消息是不同的。在输出中，第一个错误消息是Promise.any()方法的错误消息，第二个错误消息是Promise.race()方法的错误消息。

Uncaught (in promise) AggregateError: All promises were rejected
Uncaught (in promise) First Rejected Promise.....