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

        //......

    }

}

 "

“async和await怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！