ES6 中promise的使用

一对promise的理解

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

二用法

1.一般使用

 1 function loadImg(url){  //定义一个函数
 2        return new Promise((resolve,reject)=>{  //new promise
 3                  console.log('进入promise')
 4                   let img=new Image();
 5                   img.src=url;
 6                   img.onload=function(img){
 7                       console.log('img',img)
 8                       resolve(img)
 9                   };
10                   img.onerror=function(error){
11                       reject(error);
12                   }
13                   
14               })
15           }

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

1 loadImg(url).then((img)=>{
2               let box=document.getElementById('app');
3               box.appendChild(img);
4               console.log('box',box)
5           },(error)=>{
6               console.log('错误啦')
7               console.warn(error)
8           })
9   },

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中
})

})

ES6 中promise的使用

猜你喜欢