先從字面意思理解一下 :
async:異步,用于申明一個 function 是異步的
await:async wait,用來等待一個異步方法執(zhí)行完畢
規(guī)則:await只能在async中使用
而async到底起的什么作用呢?
寫一個函數(shù)看一下輸出:

ok,看起來,它只是將返回值封裝成promise對象。
而官方文檔也是這么介紹的:
async函數(shù)(包含函數(shù)語句、函數(shù)表達式、Lambda表達式)會返回一個 Promise 對象,如果在函數(shù)中 return 一個直接量,async 會把這個直接量通過 Promise.resolve() 封裝成 Promise 對象。
前面說了await只能在async中使用,所以我們在async的外層并不能使用await獲取其返回值,那么我們只好用then()鏈式處理這個promise對象。我們再打印一下看看。

如果莫得返回值呢?async會返回啥子呢?

ok。
我們還知道promise的特點是無等待,也就是說執(zhí)行async函數(shù)時,如果莫得await,那么這個函數(shù)會立即執(zhí)行,返回一個promise對象。也就是說離開了await,async就是一個返回promise對象的普通函數(shù),并沒用什么特別之處。所以關鍵還是在于await。
按照官方說法:await等待的是一個表達式,這個表達式的計算結果是Promise對象或者其它值。
!await 等的是什么,不是async函數(shù),而是一個返回值。!!
await可以用來等待一個async函數(shù)的返回值, 但并不僅僅只能等待async返回的promise對象,它可以等任意表達式的結果。也就是說你就算在await后面跟普通函數(shù)也是可行的。比如:

重點來了,上面說了await在等什么,那么當她等來了她要等的之后呢?
有兩種情況:
1. 如果等來的不是promise對象,await會阻塞后面的代碼,先執(zhí)行async外面的同步代碼,同步代碼執(zhí)行完,再回到async內部,把這個非promise的東西,作為 await表達式的結果。
2. 如果等來了promise對象,await 會阻塞后面的code,先執(zhí)行async外面的同步代碼,同步代碼執(zhí)行完,再回到async內部,等到promise對象resolve,然后得到resolve的值,作為await表達式的運算結果。比如上面的代碼圖,我們知道asyncFunc的返回值顯然是promise對象,然而打印出的val1卻是promise對象的resole的值,就是這個原因。
大概就是這個樣子,那么 async/await 的優(yōu)勢也就顯而易見了:
優(yōu)勢在于處理then鏈。我們知道promise通過then鏈來解決回調地獄的問題,而 async/await 的存在又是為了進一步優(yōu)化 promise 的then鏈。
我們上代碼舉例說明它是怎么優(yōu)化的。

ok,先用promise的方式處理這三個step函數(shù):

如果使用 async/await 來實現(xiàn)呢?

相較而言,async/await 的寫法清晰了很多。然而這樣還是體現(xiàn)的不夠明顯。我們改一下需求再看。
仍然是三個步驟,但每一個步驟都需要之前每個步驟的結果。

ok,我們來看一下如果用promise寫會寫成什么樣:

surprise ? 由此可見,復雜的參數(shù)處理,是promise不可避免的弊端??粗@么多的參數(shù)傳遞感覺要瘋了哈哈,別急,我們再試試用 async/await 來寫:

沒錯,簡潔至此,眼笑眉舒。