JavaScript中promise.all和promise.race的区别详解

前言

Promise.all和Promise.race是JavaScript中Promise API的两个重要方法，它们在处理多个Promise对象时表现出不同的行为。以下是它们之间的主要区别：

1. 功能和行为

Promise.all：

功能：接收一个包含多个Promise的数组（或类数组对象）作为参数，并返回一个新的Promise。

行为：只有当数组中的所有Promise对象都成功完成时（即状态都变为fulfilled），返回的Promise对象才会成功完成，并将所有Promise的结果作为一个数组返回。如果数组中的任何一个Promise对象失败（即状态变为rejected），则返回的Promise对象会立即失败，并将第一个失败的Promise的原因作为失败原因返回。

使用场景：适用于需要等待所有异步操作都成功完成后再进行下一步操作的场景，如同时加载多个资源并在所有资源都加载完成后显示页面。

Promise.race：

功能：同样接收一个包含多个Promise的数组（或类数组对象）作为参数，并返回一个新的Promise。

行为：这个返回的Promise会在数组中的任意一个Promise状态变为fulfilled或rejected时被解决或拒绝，且以第一个被解决的Promise的结果（或原因）作为其结果返回。如果数组中的所有Promise都被拒绝，则返回的Promise将会以最先被拒绝的Promise的原因作为其原因拒绝。

使用场景：适用于设置超时机制或只关心第一个完成的异步操作的场景，如发起一个请求并设置一个超时时间，如果请求在超时时间内完成，则返回请求结果；如果超时，则返回超时错误。

2. 返回值和状态

Promise.all：返回一个新的Promise，其状态取决于所有传入的Promise对象的状态。如果所有Promise都成功完成，则新Promise也成功完成，并返回所有结果的数组；如果有任何一个Promise失败，则新Promise也失败，并返回第一个失败的原因。

Promise.race：同样返回一个新的Promise，但其状态仅由第一个解决的Promise决定。无论第一个解决的Promise是成功还是失败，新Promise的状态都会与其保持一致，并返回相应的结果或原因。

3. 示例

Promise.all示例：

const promise1 = Promise.resolve(3);  
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));  
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 50, 'bar'));  
 
Promise.all([promise1, promise2, promise3]).then((values) => {  
  console.log(values); // [3, 'foo', 'bar']  

});

Promise.race示例：

javascript

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'one'));  
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'two'));  
 
Promise.race([promise1, promise2]).then((value) => {  
  console.log(value); // "two"  

    });

总结

Promise.all和Promise.race在处理多个Promise对象时提供了不同的机制。Promise.all适用于需要等待所有异步操作都成功完成的场景，而Promise.race则适用于只关心第一个完成的异步操作的场景。了解它们之间的区别对于在JavaScript中编写高效、可靠的异步代码至关重要。