如何講清楚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(
")



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



        
//......



    }



}



 
"