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

之前面试中，被面试官问道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);
   });

复制

通过打印的日志，我们可以看出来，返回的始终是字符串，并不是数字，说明只返回某个最先成功的或者最先失败的。

这个我在实际项目上暂时没有用到，场景暂时还不知道。如果有用到的可以补充。