上圖左爲Generator的寫法,右爲async的寫法,同爲輸出promise結果小程序
async函數返回一個 Promise 對象,可使用then方法添加回調函數。當函數執行的時候,一旦遇到await就會先返回,等到異步操做完成,再接着執行函數體內後面的語句。promise
上面代碼是一個獲取股票報價的函數,函數前面的async關鍵字,代表該函數內部有異步操做。調用該函數時,會當即返回一個Promise對象。異步
顯然使用三個await是不合理的,既然await後能夠跟跟promise,那麼咱們可使用promise.all來知足此需求
複製代碼
async函數返回一個promise對象async函數內部return返回的值,會成爲then方法回調函數的參數async
上圖代碼中,函數f內部return命令返回的值,會被then方法回調函數接收到函數
async函數內部拋出錯誤,會致使返回的Promise對象變爲reject狀態。拋出的錯誤對象會被catch方法回調函數接收到優化
async函數返回的 Promise 對象,必須等到內部全部await命令後面的 Promise 對象執行完,纔會發生狀態改變,除非遇到return語句或者拋出錯誤。也就是說,只有async函數內部的異步操做執行完,纔會執行then方法指定的回調函數。spa
上面代碼中,函數getTitle內部有三個操做:抓取網頁、取出文本、匹配頁面標題。只有這三個操做所有完成,纔會執行then方法裏面的console.log。3d
正常狀況下,await命令後面是一個 Promise 對象,返回該對象的結果。若是不是 Promise 對象,就直接返回對應的值。code
上面代碼中,await命令的參數是數值123,這時等同於return 123。cdn
另外一種狀況是,await命令後面是一個thenable對象(即定義then方法的對象),那麼await會將其等同於 Promise 對象。
上面代碼中,await命令後面是一個Sleep對象的實例。這個實例不是 Promise 對象,可是由於定義了then方法,await會將其視爲Promise處理。
下面這個例子演示瞭如何實現休眠效果。JavaScript 一直沒有休眠的語法,可是藉助await命令就可讓程序停頓指定的時間。下面給出了一個簡化的sleep實現。
await命令後面的 Promise 對象若是變爲reject狀態,則reject的參數會被catch方法的回調函數接收到。
! 注意!任何一個await語句後面的 Promise 對象變爲reject狀態,那麼整個async函數都會中斷執行。
若是任意一個await後面的異步操做出錯,那麼等同於async函數返回的 Promise 對象被reject。 爲了防止此類狀況發生,可使用try...catch作異常處理
場景描述:檢索用戶,若用戶已借繪本大於5本,押金小於100元則依次彈出提醒彈窗(需用戶手動點擊纔可關閉彈窗)
上圖爲代碼實現
場景描述:輸入手機號,獲取驗證碼,校驗手機是否登陸,登陸系統
未優化版本
優化版本
async 函數的實現原理,就是將 Generator 函數和自動執行器,包裝在一個函數裏。