ES6中Promise的用法

1、promise是一个构造函数，那就new一个出来

var p = new Promise(function(resolve,reject){
   //做一些异步操作
   setTimeout(function(){
       console.log("执行完成");
       resolve("随便什么数据");  
   }, 2000);

});

①Promise函数中有两个参数resolve（异步操作执行成功后的回调函数，将Promise的状态置为fullfiled）和reject（异步操作执行失败后的回调函数，将Promise的状态置为rejected）

②在上边的代码中，我们只是new了一个p对象，并没有调用它，但是传进去的函数就执行了，2秒后输出“执行成功”，并且调用resolve方法。所以我们用promise的时候一般是包在一个函数中，在需要的时候去调用这个函数。

function test(){
   var p = new Promise(function(resolve,reject){
      //做一些异步操作
      setTimeout(function(){
          console.log("执行完成");
          resolve("随便什么数据");     //执行成功的回调
      }, 2000);
   });
   return p;     //返回一个promise对象
}  

test();

2、promise的用法（4种）

 

• resolve、reject的用法
• catch的用法
• all的用法
• race的用法

 

1）resolve、reject的用法

function getNumber(){
   var p = new Promise(function(resolve,reject){ 
      //做一些异步操作
      setTimeout(function(){
         var num = Math.ceil(Math.random()*10);   //0-10之间的随机数
         if(num <= 5){  //将num<=5作为成功状态
            resolve(num);         //成功回调
         }else{
            reject("数字太大");   //失败回调
         }
      }, 2000);
   });
   return p;
}
getNumber().then(  //在getNumber中传入resolve、reject的数据并返回p，能在then方法的data中拿到
   function(data){    //成功回调
      console.log("resolved");       
      console.log(data);        
   },
   function(data){    //失败回调
      console.log("rejected");
      console.log(data);    
   }

);

【注】then方法接受两个参数，第一个对应resolve的回调，第二个对应reject的回调，多次运行这段代码，可随机得出以下两种结果

   或者   

【重点】只有在promise函数中定义了resolve（）或者reject才会执行then方法

2）catch方法的用法

用法①：和then的第二个参数一样，指定reject的回调

用法②：在执行resolve的回调时，如果代码出错，就会进入catch中，此时错误原因会传入catch的data中

getNumber().then(
   function(data){    //成功回调
      console.log("resolved");       
      console.log(data);        
   }  
).catch(
   function(data){    //失败回调
      console.log("rejected");
      console.log(data);    
   }
);

3）all的用法

提供了并行执行异步操作的能力，并且在所有的异步操作执行完后才执行回调。

const p = New Promise(p1,p2,p3);

p的状态由p1、p2、p3共同决定，分两种情况

①只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数

②只要p1、p2、p3的状态有一个变成rejected，那么p的状态也会变成rejected，此时第一个被rejected实例的返回值，会传递给p的回调函数

Promise.all([p1,p2,p3]).then(()=>{

}).catch(()=>{
    
})

情况:①：

情况②:

const p1 = new Promise((resolve,reject)=>{
    resolve("1")
})
const p2 = new Promise((resolve,reject)=>{
    reject("2")
})
Promise.all([p1,p2]).then((res)=>{    //第一个reject实例的返回值传递给all的回调函数
    console.log(res)
}).catch((error)=>{
    console.log(error)
});

//输出：
2

【注意】如果作为参数的Promise实例，自定定义了catch，一旦他们被rejected，是不会调用Promise.all()后边的catch（）方法

而是调用then方法，被rejected的实例执行catch后返回undefiend

4）race的用法

用法类似all，不过all是以跑的慢的为准执行回调，而race是以跑的快的为准执行回调