好程式員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(); })    

    })

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

    ajaxD("xxxx");

});  

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

//将請求改造成一個通用函數

function request(options) {

    //.....

    return new Promise(....); //使用Promise執行請求,并傳回Promise對象

}

//于是我們就可以來發送請求了

request("http://xxxxxx")

.then((data)=>{

    //處理data

})

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

request("ajaxA")

   //處理data

   return request("ajaxB")

   return request("ajaxC")

   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這個單詞是等待的意思

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

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

傳統的寫法是這樣的

.then((data1)=>{

   return request("ajaxB", data1);

.then((data2)=>{

   return request("ajaxC", data2)

.then((data3)=>{

   return request("ajaxD", data3)

而使用async/await是這樣的

    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對象

關于異常處理

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

    try{

        let data1 = await request("ajaxA");  

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

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

    } catch(e){

        //......

    }