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

  })

  },