ES6(異步操作和Async函數(shù)&&await)

? ? ? ?async 是“異步”的簡寫,比如Ajax中就有這個代表異步請求;而 await 可以認(rèn)為是 async wait 的簡寫,因為await只能出現(xiàn)在async函數(shù)中的語法規(guī)定。所以應(yīng)該很好理解 async 用于申明一個 function 是異步的,而 await 用于等待一個異步方法執(zhí)行完成。

一.async到底是個什么東西

? ??async 函數(shù)返回的是一個 Promise 對象。async 函數(shù)(包含函數(shù)語句、函數(shù)表達(dá)式、Lambda表達(dá)式)會返回一個 Promise 對象,如果在函數(shù)中 return 一個直接量,async 會把這個直接量通過 Promise.resolve() 封裝成 Promise 對象。如下圖所示:

很明顯async函數(shù)返回的就是promise對象。

那么在沒有await配合下,async返回promise對象,所以可以配合then處理如下圖:

返回的同樣結(jié)果,所以和promise對象中then用法一樣的效果。聯(lián)想一下 Promise 的特點(diǎn)——無等待,所以在沒有 await 的情況下執(zhí)行 async 函數(shù),它會立即執(zhí)行,返回一個 Promise 對象,并且,絕不會阻塞后面的語句。這和普通返回 Promise 對象的函數(shù)并無二致。

二.那么await等到底等的什么:

await 是個運(yùn)算符,用于組成表達(dá)式,await 表達(dá)式的運(yùn)算結(jié)果取決于它等的東西。如果它等到的是一個 Promise 對象,等 Promise 對象 resolve,然后得到 resolve 的值,作為 await 表達(dá)式的運(yùn)算結(jié)果。sync 函數(shù)調(diào)用不會造成阻塞,它內(nèi)部所有的阻塞都被封裝在一個 Promise 對象中異步執(zhí)行。

這是promise模擬耗時異步

如果改用 async/await 呢,會是這樣

這是async&&await模擬耗時異步

這兩段代碼,兩種方式對異步調(diào)用的處理(實際就是對 Promise 對象的處理)差別并不明顯,甚至使用 async/await 還需要多寫一些代碼,那它的優(yōu)勢到底在哪?

三.async/await 的優(yōu)勢在于處理 then 鏈:

? ? ?單一的 Promise 鏈并不能發(fā)現(xiàn) async/await 的優(yōu)勢,但是,如果需要處理由多個 Promise 組成的 then 鏈的時候,優(yōu)勢就能體現(xiàn)出來了(很有意思,Promise 通過 then 鏈來解決多層回調(diào)的問題,現(xiàn)在又用 async/await 來進(jìn)一步優(yōu)化它)。

假設(shè)一個業(yè)務(wù),分多個步驟完成,每個步驟都是異步的,而且依賴于上一個步驟的結(jié)果。我們?nèi)匀挥?setTimeout 來模擬異步操作:

假設(shè)一個業(yè)務(wù),分多個步驟完成,每個步驟都是異步的,而且依賴于上一個步驟的結(jié)果

現(xiàn)在用 Promise 方式來實現(xiàn)這三個步驟的處理:

?Promise 方式處理異步

接下來用 async/await 來實現(xiàn):

async&&await實現(xiàn)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 異步編程對JavaScript語言太重要。Javascript語言的執(zhí)行環(huán)境是“單線程”的,如果沒有異步編程,根本...
    呼呼哥閱讀 7,410評論 5 22
  • 簡單介紹下這幾個的關(guān)系為方便起見 用以下代碼為例簡單介紹下這幾個東西的關(guān)系, async 在函數(shù)聲明前使用asyn...
    _我和你一樣閱讀 21,510評論 1 24
  • 你不知道JS:異步 第三章:Promises 在第二章,我們指出了采用回調(diào)來表達(dá)異步和管理并發(fā)時的兩種主要不足:缺...
    purple_force閱讀 2,260評論 0 4
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 11,141評論 26 95
  • 弄懂js異步 講異步之前,我們必須掌握一個基礎(chǔ)知識-event-loop。 我們知道JavaScript的一大特點(diǎn)...
    DCbryant閱讀 2,889評論 0 5

友情鏈接更多精彩內(nèi)容