Promise.all和Promise.race的区别

背景

最近在面试的过程中发现笔试题中有这么一个问题，并且在一次面试过程中也有问道这个问题。所以下来做了一下研究，然后做一次笔记，分享出来希望对大家有所帮助。原文地址公众号

Promise.all

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

1. 当其中一个Promise返回失败状态，函数将直接返回失败。
2. all会等所有Promise实例都请求成功以后统一返回。

【1.】：返回失败

在示例中我们可以看出，当Promise有失败的请求时，直接返回失败了，后续的请求是没有执行的。

const p1 = new Promise((resolve, reject) => { resolve('success1'); });
const p2 = new Promise((resolve, reject) => { 
  setTimeout(()=>{
    reject('success2');
  }, 100);
});

Promise.all([p1,p2])
  .then(res=>{
    console.log('res',res); // Uncaught (in promise) success2
  })

【2.】：等待全部完成以后返回

在该示例中，我们可以看出p2是有延迟1秒的；而打印的结果也会等待一秒以后全部返回。

const p1 = new Promise((resolve, reject) => { resolve('success1'); });
const p2 = new Promise((resolve, reject) => { 
  setTimeout(()=>{
    resolve('success2');
  }, 1000);
});

Promise.all([p1,p2])
  .then(res=>{
    console.log('res',res); // ['success1', 'success2']
  })

Promise.race

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

1. 使用方法跟all一致，但是只会返回第一个成功或者失败的状态。
2. race只会返回一个成功或者失败的，其他的不论成功或者失败状态都不会返回。

【1.】返回成功或者失败。

成功：

我们在这个示例中可以看出，优先执行了p1，然后p2没有执行；返回的是成功的状态。

const p1 = new Promise((resolve, reject) => { resolve('success1'); });
const p2 = new Promise((resolve, reject) => { 
  setTimeout(()=>{
    resolve('success2');
  }, 1000);
});
Promise.race([p1,p2])
  .then(res=>{
    console.log('race++', res); // race++ success1
  })
  .catch(err=>{
    console.log('race--',err);
  })

失败：

我们在这个示例中可以看出，优先执行了p1，然后p2没有执行；返回的是失败的状态。

const p1 = new Promise((resolve, reject) => { reject('success1'); });
const p2 = new Promise((resolve, reject) => { 
  setTimeout(()=>{
    resolve('success2');
  }, 1000);
});
Promise.race([p1,p2])
  .then(res=>{
    console.log('race++', res);
  })
  .catch(err=>{
    console.log('race--',err); // race-- success1
  })

总结

我们从上面的示例中可以得出一下区别结果：

1. race并不适用与并发场景，因为他只会返回最先返回的结果；不论成功和失败。
2. all在处理并发请求时，会等所有状态都成功以后才会返回成功。
3. all在处理并发请求时，如果有一个状态为失败，会中断请求并抛出错误。