简单说下 Promise.all 和 Promise.race 区别和使用场景

Question

之前面试中，被面试官问道 Promise.all 在项目上有没有用到和具体使用场景是什么，由于项目上使用的不多，导致回答的不是很好，回去赶紧把相关知识巩固巩固。今天就简单分享下 Promise.all 和 Promise.race 的相关的知识点。

1 Promise.all

Promise.all(iterable);

Promise.all() 方法接收一个 promise 的 iterable 类型（注：Array，Map，Set 都属于 ES6 的 iterable 类型）的输入，并且只返回一个 Promise 实例。我们新建几个变量

let str = "1";
let func = (function() {
  return "func";
})();
let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("p1 success");
  }, 1000);
});
let p2 = Promise.resolve("p2 success");
let p3 = new Promise((resolve, reject) => {
  reject("p3 error");
});

一个字符串、一个匿名函数自调、一个成功的 Promise、一个定时的 Promise 和一个失败的 Promise。Promise.all() 方法接收一个 promise 的 iterable 类型，那我们用 Set 来测试。

const set = new Set();
set.add(str);
set.add(func);
set.add(p1);
set.add(p2);

Promise.all() 调用。

Promise.all(set)
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });

由于 set 里面的全部成功，所以我们通​ console，会发现，返回的是个数组。并且是按照顺序返回。

这里有个注意点，如果我们传的参数是 Set。那会有个问题，就是如果 resolve 中的值有一样的，那在返回的数组中，会去掉相同的。我们再往 set 里面 add p3

set.add(p3);

这次返回的不是数组，而是字符串 p3 error。通过上面代码，我们可以总结以下几个。

1. 它接受一个 iterable 类型作为参数。
2. 参数里面的值可以是 Promise 对象，也可以是其它值，只有 Promise 会等待状态改变。
3. 当所有的子 Promise 都完成，该 Promise 完成，返回值是全部值的数组。
4. 如果有任何一个失败，该 Promise 失败，返回值是第一个失败的子 Promise 的结果。

应用场景：多个异步合并使用，比如多个接口调用成功后在显示页面。

2 Promise.race

Promise.race(iterable)

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。还是使用上面的例子。

Promise.race(set)
   .then(res => {
     console.log(res);
   })
   .catch(err => {
     console.log(err);
   });

通过打印的日志，我们可以看出来，返回的始终是字符串，并不是数字，说明只返回某个最先成功的或者最先失败的。这个我在实际项目上暂时没有用到，场景暂时还不知道。如果有用到的可以补充。