天天看點

前端面試——回調、Promise、Generator和async-await

首先我們回顧一下javascript異步的發展曆程。

ES6 以前:

  回調函數(callback):nodejs express 中常用,ajax中常用。

ES6:

  promise對象:nodejs最早有bluebird promise的雛形,axios中常用。

  generator函數:nodejs koa架構使用率很高。

ES7:

  async/await文法:目前最常用的異步文法,nodejs koa2 完全使用該文法。

回調函數CALLBACK:

将一個函數當做參數傳到另一個函數裡,當那個函數執行完後,再執行傳進去的這個函數;這個過程就叫做回調。

前端面試——回調、Promise、Generator和async-await
前端面試——回調、Promise、Generator和async-await

Promise對象:

promise 對象用于一個異步操作的最終完成(或最終失敗)及其結果的表示。

簡單地說就是處理一個異步請求。我們經常會做些斷言,如果我赢了你就嫁給我,如果輸了我就嫁給你之類的斷言。

這就是promise的中文含義:斷言,一個成功,一個失敗。

舉個例子,友善大家了解:

promise構造函數的參數是一個函數,我們把它稱為處理器函數。

處理器函數接收兩個函數reslove和reject作為其參數,當異步操作順利執行則執行reslove函數, 當異步操作中發生異常時,則執行reject函數。

前端面試——回調、Promise、Generator和async-await
前端面試——回調、Promise、Generator和async-await
前端面試——回調、Promise、Generator和async-await

async-await

async函數傳回一個promise對象,如果在async函數中傳回一個直接量,async會通過Promise.resolve封裝成Promise對象。

我們可以通過調用promise對象的then方法,擷取這個直接量。

前端面試——回調、Promise、Generator和async-await
前端面試——回調、Promise、Generator和async-await

await會暫停目前async的執行,await會阻塞代碼的執行,直到await後的表達式處理完成,代碼才能繼續往下執行。

await後的表達式既可以是一個Promise對象,也可以是任何要等待的值。

如果await等到的是一個 Promise 對象,await 就忙起來了,它會阻塞後面的代碼,等着 Promise 對象 resolve,然後得到 resolve 的值,作為 await 表達式的運算結果。

繼續閱讀