好程式設計師web前端培訓分享如何講清楚async和await？

　　好程式設計師 web前端培訓 分享如何講清楚async和 await ？ async 和 await 要搭配 Promise 使用 ,  它進一步極大的改進了 Promise 的寫法

 

來看一個簡單的場景:

 

//假設有 4 個非同步方法要按順序呼叫

new Promise(function(resolve){

    ajaxA("xxxx", ()=> { resolve(); })    

}).then(function(){

    return new Promise(function(resolve){

        ajaxB("xxxx", ()=> { resolve(); })    

    })

}).then(function(){

    return new Promise(function(resolve){

        ajaxC("xxxx", ()=> { resolve(); })    

    })

}).then(function(){

    ajaxD("xxxx");

});  

語法上不夠簡潔, 我們可以稍微改造一下

 

//將請求改造成一個通用函式

function request(options) {

    //.....

    return new Promise(....); //使用 Promise 執行請求 , 並返回 Promise 物件

}

//於是我們就可以來傳送請求了

request(")

.then((data)=>{

    //處理 data

})

 

 

然後我們再來重新改造開頭的程式碼

 

request("ajaxA")

.then((data)=>{

   //處理 data

   return request("ajaxB")

})

.then((data)=>{

   //處理 data

   return request("ajaxC")

})

.then((data)=>{

   //處理 data

   return request("ajaxD")

})

 

 

比起之前有了不小的進步, 但是看上去依然不夠簡潔

 

如果我能像使用同步程式碼那樣, 使用 Promise 就好了

 

於是, async \ await出現了

 

async function load(){

    await request("ajaxA");

    await request("ajaxB");

    await request("ajaxC");

    await request("ajaxD");

}

 

await關鍵字使用的要求非常簡單 ,  後面呼叫的函式要返回一個 Promise 物件

load()這個函式已經不再是普通函式 ,  它出現了 await 這樣 " 阻塞式 " 的操作

因此async關鍵字在這是不能省略的

那麼現在看, 這段程式碼變得異常清秀

 

程式碼的編寫順序

 

程式碼的閱讀順序

 

程式碼的執行順序

 

全部都是按照同步的習慣來的

 

是不是很方便.

 

 

到這你已經學會了async和 await 基本使用方式

 

下面來簡單解釋一下它的工作流程

 

//wait這個單詞是等待的意思

async function load(){

    await request("ajaxA");  //那麼這裡就是在等待 ajaxA 請求的完成

    await request("ajaxB");

    await request("ajaxC");

    await request("ajaxD");

}

如果後一個請求需要前一個請求的結果怎麼辦呢?

 

傳統的寫法是這樣的

 

request("ajaxA")

.then((data1)=>{

   return request("ajaxB", data1);

})

.then((data2)=>{

   return request("ajaxC", data2)

})

.then((data3)=>{

   return request("ajaxD", data3)

})

而使用async/await是這樣的

 

async function load(){

    let data1 = await request("ajaxA");  

    let data2 = await request("ajaxB", data1);

    let data3 = await request("ajaxC", data2);

    let data4 = await request("ajaxD", data3);

    //await不僅等待 Promise 完成 ,  而且還拿到了 resolve 方法的引數

}

注意當一個函式被async修飾以後 ,  它的返回值會被自動處理成 Promise 物件

 

關於異常處理

 

async function load(){

    //請求失敗後的處理 ,  可以使用 try-catch 來進行

    try{

        let data1 = await request("ajaxA");  

        let data2 = await request("ajaxB", data1);

        let data3 = await request("ajaxC", data2);

    } catch(e){

        //......

    }

}