promise中all和race的区别

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

一、功能

1. Promise.all

   • 功能：接收一个包含多个Promise的数组（或类数组对象）作为参数，并返回一个新的Promise。
   • 使用场景：适用于需要等待所有异步操作都成功完成后再进行下一步操作的场景，如同时加载多个资源并在所有资源都加载完成后显示页面。

2. Promise.race

   • 功能：同样接收一个包含多个Promise的数组（或类数组对象）作为参数，并返回一个新的Promise。
   • 使用场景：适用于设置超时机制或只关心第一个完成的异步操作的场景，如发起一个请求并设置一个超时时间，如果请求在超时时间内完成，则返回请求结果；如果超时，则返回超时错误。

二、行为

1. Promise.all

   • 只有当数组中的所有Promise对象都成功完成时（即状态都变为fulfilled），返回的Promise对象才会成功完成，并将所有Promise的结果作为一个数组返回。
   • 如果数组中的任何一个Promise对象失败（即状态变为rejected），则返回的Promise对象会立即失败，并将第一个失败的Promise的原因作为失败原因返回。
   • 一旦有一个Promise被拒绝，Promise.all就会立即返回拒绝状态的Promise，后续的Promise将不再被等待。
   • 即使某些Promise的完成时间不同，返回结果的顺序仍然与调用时的顺序一致。

2. Promise.race

   • 这个返回的Promise会在数组中的任意一个Promise状态变为fulfilled或rejected时被解决或拒绝，且以第一个被解决的Promise的结果（或原因）作为其结果返回。
   • 如果数组中的所有Promise都被拒绝，则返回的Promise将会以最先被拒绝的Promise的原因作为其原因拒绝。
   • 只要数组中有一个Promise的状态改变（无论是fulfilled还是rejected），Promise.race就会结束，并返回第一个改变状态的Promise的结果或原因。

三、示例

1. 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']  
   });

2. Promise.race示例

   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中编写高效、可靠的异步代码至关重要。