async和await有什么用

這篇文章將為大家詳細講解有關(guān)async和await有什么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

來看一個簡單的場景:

//假設有4個異步方法要按順序調(diào)用

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");

});  

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

//將請求改造成一個通用函數(shù)

function request(options) {

    //.....

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

}

//于是我們就可以來發(fā)送請求了

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出現(xiàn)了

async function load(){

    await request("ajaxA");

    await request("ajaxB");

    await request("ajaxC");

    await request("ajaxD");

}

await關(guān)鍵字使用的要求非常簡單, 后面調(diào)用的函數(shù)要返回一個Promise對象

load()這個函數(shù)已經(jīng)不再是普通函數(shù), 它出現(xiàn)了await這樣"阻塞式"的操作

因此async關(guān)鍵字在這是不能省略的

那么現(xiàn)在看, 這段代碼變得異常清秀

代碼的編寫順序

代碼的閱讀順序

代碼的執(zhí)行順序

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

是不是很方便.

到這你已經(jīng)學會了async和await基本使用方式

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

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

async function load(){

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

    await request("ajaxB");

    await request("ajaxC");

    await request("ajaxD");

}

如果后一個請求需要前一個請求的結(jié)果怎么辦呢?

傳統(tǒng)的寫法是這樣的

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方法的參數(shù)

}

注意當一個函數(shù)被async修飾以后, 它的返回值會被自動處理成Promise對象

關(guān)于異常處理

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

        //......

    }

}

關(guān)于“async和await有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。