Promise.all 和 Promise.race

Promise.all的使用

• Promise.all() 方法接收一个promise的 iterable (可迭代，例如Array, Set, Map)类型
• resolve回调的结果是一个数组，且这个回调是在所有输入的promise的resolve回调都结束时执行，或者输入的可迭代类型里没有promise了的时候
• reject回调执行是只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误。并且reject的是第一个抛出的错误信息。
• 且回调的顺序是和输入的顺序有关，即使后面的更快，在回调时的结果还是严格按照输入的顺序来的。

例：

const promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'one');
  });
  
  const promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 300, 'two');
  });
  
  const promise3 = new Promise((resolve, reject) => {
    setTimeout(reject, 400, 'three');
  });

    
  const promise4 = new Promise((resolve, reject) => {
    setTimeout(reject, 500, 'four');
  });


Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// [ 'one', 'two' ]，即使 two 比 one 先 resolve

  Promise.all([promise1, promise2, promise3, promise4]).then((value) => {
    console.log(value);
  }).catch(err=>console.log(err));
// three，只要有一个抛出错误了

使用场景

例如，有些页面需要请求多个接口渲染数据，而且希望全部请求完再一起渲染。这个时候就可以使用 .all 去批量请求了。
实现一个函数实现最大的请求控制数

Promise.race

• 接收一个promise的 iterable (可迭代，例如Array, Set, Map)类型
• 一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

简单来说就是：无论完成还是拒绝，只要谁的状态先确定了谁就回调谁
例如：实现一个函数来处理请求超时

例如：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 300, 'two');
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 'three');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // 两个都resolve了，但是 promise2 更快
});

  Promise.race([promise1, promise2, promise3]).then((value) => {
    console.log(value);
  }).catch(err=>console.log(err));
  //  promise3 更快地 转变为 rejected 状态，所以走了 .catch

使用场景

• 有个接口要请求，但是要判断是否超时，所以就可以把接口和setTimeout一起放进 .race 中。如果setTimeout 执行了，请求还未执行，就可以通过 setTimeout 去告知用户
• 有多个接口分别部署在不同的服务器，但都是同一个功能。这个时候也可以用 .race 谁先最快地返回就执行谁的回调。