简单说下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);
      
     
    

     

      

     
     

      

          });
      
     
   
  

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

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