如何講清楚async和await？

如何講清楚async和await？

承接上一篇文章

Eric：如何講清楚Promise?

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("http://xxxxxx")



.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){



        //......



    }



}



 "

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69923331/viewspace-2695097/，如需轉載，請註明出處，否則將追究法律責任。