ES6 中promise的使用

一 对promise的理解

  js中promise主要用于异步执行的场景，两个回调函数resolve，reject。

二 用法

  1.一般使用

function loadImg(url){  //定义一个函数
       return new Promise((resolve,reject)=>{  //new promise
                 console.log('进入promise')
                  let img=new Image();
                  img.src=url;
                  img.onload=function(img){
                      console.log('img',img)
                      resolve(img)
                  };
                  img.onerror=function(error){
                      reject(error);
                  }
                  
              })
          }

调用这个函数then（(sucess)=>{},(error)=>{}).catch（()={}）,第一个回调是promise中执行resolve函数成功的回调，第二个回调是promoise中执行reject的回调,catch是整个promise的报错

loadImg(url).then((img)=>{
              let box=document.getElementById('app');
              box.appendChild(img);
              console.log('box',box)
          },(error)=>{
              console.log('错误啦')
              console.warn(error)
          })
  },

2.对于有多个异步执行的情况使用promise.all,promise.all()传入一个数组promise对象

   先定义N个promise对象

let p1=new promise((resolve,reject)=>{
    resolve('美女')
    reject('error1')
});
let p2=new promise((resolve,reject)=>{
    resolve('豪车')
    reject('error2')
})
let p3=new promise((resolve,reject)=>{
    resolve('豪宅')
    reject('error3')
})

使用promise.all

promise.all([p1,p2,p3]).then((res)=>{
　　console.log(res) //[“美女”，“豪车”，“豪宅”] 如果p1、p2、p3都是执行resolve则then返回这几个成功回调的数组，如果P1、P2、P3中任意一个执行了reject，则只返回这个reject回调
})

3. promise.race的使用，用法上跟promise.all有点类似也是传入一个promise数组对象。但promise.race([p1,p2,p3]).then((res)=>}{})的then中返回的是p1,p2,p3中最新改变状态的回调,并且不会往下执行

let p1=new promise((resolve,reject)=>{
   setTimeout(()=>{
        resolve('美女')
    reject('error1')  
   },3000)

});
let p2=new promise((resolve,reject)=>{
   setTimeout(()=>{
        resolve('豪车')
    reject('error2')  
   },2000)

});
let p3=new promise((resolve,reject)=>{
   setTimeout(()=>{
        resolve('豪宅')
    reject('error3')  
   },1000)

});

promise.race([p1,p2,p3]).then((res)=>{
　　console.log(res)   // 豪宅  race 不关心p1,p2,p3中是执行了resolve还是reject,只关心哪个promise对象的状态最先发生了改变,并将这个回调函数返回到then中
}) 

 4.其它async 的使用,在函数前添加async,那么这个函数就默认为promise方法,所以可以在函数后面添加then,这个then就是返回这个function函数的return的内容,catch会捕获这个function

抛出的错误,再函数面前添加async的主要作用是当这个函数有错误的时候也不会阻塞后面语句的执行,因为这个是异步的.

<script>
     
     //会阻塞的例子 这段代码只会打印'aaa',后面的代码不会执行,因为打印bb的为undefind报错导致后面的语句console.log("虽然我在前面,但是我先执行")
     function timeout() {
            console.log('aaa')
            console.log(bb)//没定义报错,不带sync的话导致阻塞
            return 'hello world';
            
        }
    
     timeout().then((res)=>{
        console.log(res)
    }).catch((error)=>{
        console.log(error)
    })
    console.log('虽然在后面，但是我先执行');
   
</script>
如果定义function timeout(){}的时候在前面加上async,函数内部报错则不会影响后面语句的执行

 

5. async配合await使用,注意await 关键字只能放到async 函数里面,await里面的异步(如设置了timeout)一个一个往下执行,让异步方法犹如同步的使用,使用此方法可以处理一些有依赖的方法

需要注意的是 await 后面必须跟的是promise实例

  

<script>
    function timeout(num){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                console.log('p1')
                resolve(2 * num)
            },2000)
        })
    }
    function timeout1(num){  //await 后面的函数必须是promise实例
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                console.log('p2')
                resolve(2 * num)
            },5000)
        })
    };
    async function testreule(){
        console.log(1111)   //打印顺序1
        let r1=await timeout(20); //第2s候打印顺序2
        console.log('r1',r1);     //第2s候打印顺序3
        let r2=await timeout1(20);//第7s候打印顺序4
        console.log('test1',r1+r2) //第7s候打印顺序4
        return r1+r2
    }
    
    testreule().then((res)=>{
        console.log('test2',res) //第7s候打印顺序4
    })
    
</script>

 

 

 

 

 

 

 

 

 

 

 

    

  })

  },