Promise 和async/await 的使用理解

 

1. new Promise時就會開始執行語句。

　 new Promise(resolve => resolove('成功信息') )     簡寫：Promise.resolve('成功信息');

　 new Promise((resolve,reject) => reject('錯誤信息') ) 簡寫：Promise.reject('錯誤信息');

 

2. new Promise中的return data語句沒啥用，而要使用resolve或reject

 

3. new Promise中resolve或reject前后的代碼都會先執行

 

4. Promise中必須使用resolve和reject 這樣then方法才會執行，否則不執行。

   

promise.then(function(value) { // 對應resolve的值
}, function(error) { // 對應異常或者reject的值
});

let p1 = new Promise((resolve, reject) => { //做一些異步操作
        setTimeout(() => { console.log('p1 - 執行完成'); //reject('我是失敗');
            resolve('我是成功！！');//必須使用resolve，不然后面不會執行
            console.log('p1 - 執行完成2'); }, 2000); }); let p2 = new Promise((resolve, reject) => { //做一些異步操作
        setTimeout(() => { console.log('執行完成2'); resolve('我是成功2！！'); //return '我是成功！！';
        }, 2000); }); p1.then((data) => { console.log("1-"+data); return p2.then((data1) =>{ console.log("p2 -1-"+data1); return "數據p2"; }) }) .then((data) => { console.log("2-"+data); return data; }) .then((data) => { console.log("3-"+data); },(err) => { console.log('3-rejected',err); }).catch((err) => { console.log('finally -rejected',err); });

 

5. then中，要返回數據要使用return ；否則后面的then接收到的數據是undefined

  then中，return data返回的數據會包裝成Promise.resolve(data)繼續調用then，后面的then能接收到data

       如果沒有return語句，那么默認是一個空的Promise.resolve(undefined)，后面的then參數接收到的數據為undefined

  then中，return new Promise()，那么會等這個Promise調用完再執行then，即鏈式調用。

  then中，new Promise() 前沒有return會異步執行，會立即執行后面的then，而不會等這個Promise執行完。

 

6. 異常處理，then中的第二個參數是接收錯誤的，會一步步通過then傳下去，也可以用catch接收。

 

7. Promise.all用法：並行異步執行，所有都執行完

 

let Promise1 = new Promise(function(resolve, reject){}) let Promise2 = new Promise(function(resolve, reject){}) let Promise3 = new Promise(function(resolve, reject){}) let p = Promise.all([Promise1, Promise2, Promise3]) p.then(funciton(){ // 三個都成功則成功 
}, function(){ // 只要有失敗，則失敗 
})

 

8. Promise.race的用法：誰跑的快，以誰為准執行回調

  //請求某個圖片資源
    function requestImg(){ var p = new Promise((resolve, reject) => { var img = new Image(); img.onload = function(){ resolve(img); } img.src = '圖片的路徑'; }); return p; } //延時函數，用於給請求計時
    function timeout(){ var p = new Promise((resolve, reject) => { setTimeout(() => { reject('圖片請求超時'); }, 5000); }); return p; } Promise.race([requestImg(), timeout()]).then((data) =>{ console.log(data); }).catch((err) => { console.log(err); });

 

9. async/await 簡化Promise編碼

     

• async/await是寫異步代碼的新方式，優於回調函數和Promise。
• async返回值是一個promise對象，async 函數內部return語句返回的值，會成為then方法調用函數的參數
• await命令后面跟着的是一個promise對象，如果不是會自動轉化為promise對象
• await 關鍵字必須位於async函數內部
• async/await是基於Promise實現的，它不能用於普通的回調函數。
• async/await與Promise一樣，是非阻塞的。
• async/await使得異步代碼看起來像同步代碼，再也沒有回調函數。但是改變不了JS單線程、異步的本質。

//例子1 -Promise
const makeRequest = () => { return promise1() .then(value1 => { return promise2(value1) .then(value2 => { return promise3(value1, value2) }) }) } //例子1 - 等價的async/await 
const makeRequest = async () => { const value1 = await promise1() const value2 = await promise2(value1) return promise3(value1, value2) }

 

//例子2 -promise
request("ajaxA") .then((data)=>{ //處理data
   return request("ajaxB") }) .then((data)=>{ //處理data
   return request("ajaxC") }) .then((data)=>{ //處理data
   return request("ajaxD") }) //例子2-等價的async/await
async function load(){ await request("ajaxA"); await request("ajaxB"); await request("ajaxC"); await request("ajaxD"); }