處理異步事件的三種方式

時間 2020-11-16

標籤 javascript html 前端 html5 java 程序員 web 面試 segmentfault api 欄目 JavaScript 简体版

原文原文鏈接

在網站開發中，異步事件是項目必然須要處理的一個環節，也由於前端框架的興起，經過框架實現的 SPA 已是快速建構網站的標配了，一部獲取數據也就成了不可或缺的一環；本文來就講一講 JavaScript 中異步的處理方式。javascript

同步？異步？

首先固然要先理解一下同步及異步分別是指什麼。html

這兩個名詞對於初學者來講老是讓人感到困惑的，畢竟從中文字面上的意思很容易讓人反過來理解，從信息科學的角度來講，同步指的是一件一件作事，而異步則是不少事情在一塊兒並行的處理。前端

好比咱們去銀行辦理業務，在窗口前排隊就是同步執行，而拿到號碼先去作別的事情的就是異步執行；經過 Event Loop 的特性，在 JavaScript 處裏異步事件可說是垂手可得的html5

那麼在 JavaScript 中處理異步事件的方法是什麼呢？java

回調函數

咱們最熟悉最的就是回調函數了。例如網頁與用戶進行互動時註冊的事件監聽器，就須要接收一個回調函數；或是其餘 Web API 的各類功能如 setTimeout、xhr，也都能經過傳遞迴調函數在用戶要求的時機去觸發。先看一個 setTimeout 的例子：程序員

// callback
function withCallback() {
  console.log('start')
  setTimeout(() => {
    console.log('callback func')
  }, 1000)
  console.log('done')
}withCallback()
// start
// done
// callback func

在 setTimeout 被執行後，當過了指定的時間間隔以後，回調函數會被放到隊列的末端，再等待事件循環處理到它。web

注意：也就時由於這種機制，開發者設定給 setTimeout 的時間間隔，並不會精準的等於從執行到觸發所通過的時間，使用時要特別注意！

回調函數雖然在開發中十分常見，但也有許多難以免的問題。例如因爲函數須要被傳遞給其餘函數，開發者難以掌控其餘函數內的處理邏輯；又由於回調函數僅能配合 try … catch 捕捉錯誤，當異步錯誤發生時難以控制；另外還有最著名的「回調地獄」。面試

Promise

幸虧在 ES6 以後出現了 Promise，拯救了身陷在地獄的開發者們。其基本用法也很簡單：segmentfault

function withPromise() {
  return new Promise(resolve => {
    console.log('promise func')
    resolve()
  })
}
withPromise()
  .then(() => console.log('then 1'))
  .then(() => console.log('then 2'))
// promise func
// then 1
// then 2

以前討論 Event Loop 時沒有提到的是，在HTML 5 的Web API 標準中，Event Loop 新增了微任務隊列（micro task queue），而 Promise 正是經過微任務隊列來驅動它的；微任務隊列的觸發時機是在棧被清空時，JavaScript 引擎會先確認微任務隊列有沒有東西，有的話就優先執行，直到清空後才從隊列拿出新任務到棧上。api

如上面的例子，當函數回傳一個 Promise 時，JavaScript 引擎便會把後傳入的函數放到微任務隊列中，反覆循環，輸出了上列的結果。後續的 .then 語法會回傳一個新的 Promise，參數函數則接收前一個 Promise.resolve 的結果，憑藉這樣函數參數傳遞，讓開發者能夠管道式的按順序處理異步事件。

若是在例子中加上 setTimeout 就更能清楚理解微任務與通常任務的差異：

function withPromise() {
  return new Promise(resolve => {
    console.log('promise func')
    resolve()
  })
}
withPromise()
  .then(() => console.log('then 1'))
  .then(() => setTimeout(() => console.log('setTimeout'), 0))
  .then(() => console.log('then 2'))
// promise func
// then 1
// then 2 -> 微任務優先執行
// setTimeout

另外，前面所說的回調函數很難處理的異步錯誤，也能夠經過 .catch 語法來捕獲。

function withPromise() {
  return new Promise(resolve => {
    console.log('promise func')
    resolve()
  })
}
withPromise()
  .then(() => console.log('then 1'))
  .then(() => { throw new Error('error') })
  .then(() => console.log('then 2'))
  .catch((err) => console.log('catch:', err))
// promise func
// then 1
// catch: error
//   ...error call stack

async await

從 ES6 Promise 問世以後，異步代碼從回呼地獄逐漸變成了優雅的函數式管道處理，但對於不熟悉度的開發者來講，只不過是從回調地獄變成了 Promise 地獄而已。

在 ES8 中規範了新的 async/await，雖然只是 Promise 和 Generator Function組合在一塊兒的語法糖，但經過 async/await 即可以將異步事件用同步語法來處理，就好像是老樹開新花同樣，寫起來的風格與 Promise 徹底不一樣：

function wait(time, fn) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('wait:', time)
      resolve(fn ? fn() : time)
    }, time)
  })
}
await wait(500, () => console.log('bar'))
console.log('foo')
// wait: 500
// bar
// foo

經過把 setTimeout 包裝成 Promise，再用 await 關鍵字調用，能夠看到結果會是同步執行的先出現 bar，再出現 foo，也就是開頭提到的將異步事件寫成同步處理。

再看一個例子：

async function withAsyncAwait() {
  for(let i = 0; i < 5; i++) {
    await wait(i*500, () => console.log(i))
  }
}await withAsyncAwait()
// wait: 0
// 0
// wait: 500
// 1
// wait: 1000
// 2
// wait: 1500
// 3
// wait: 2000
// 4

代碼中實現了withAsyncAwait 函數，用 for 循環及 await 關鍵字反覆執行 wait 函數；此處執行時，循環每次會按順序等待不一樣的秒數再執行下一次循環。

在使用 async/await 時，因爲 await 關鍵字只能在 async function 中執行，使用時務必要記得要同時使用。

另外在用循環處理異步事件時，須要注意在 ES6 以後提供的不少 Array 方法都不支持 async/await 語法，若是這裏用 forEach 取代 for，結果會變成同步執行，每隔 0.5 秒就打印出數字：