了解JavaScript中異步的處理方式

在網站開發中，非同步事件是專案必然需要處理的環節，也因為前端框架的興起，透過框架實現的SPA 已經是快速建構網站的標配了，一部取得資料也就成了不可或缺的一環；本文來就講一講JavaScript 中非同步的處理方式。

同步？異步？

首先當然要先理解一下同步及非同步分別是指什麼。

這兩個名詞對初學者來說總是讓人感到困惑的，畢竟從中文字面上的意思很容易讓人反過來理解，從資訊科學的角度來說，同步指的是一件一件做事，而異步則是很多事情在一起並行的處理。

例如我們去銀行辦理業務，在視窗前排隊就是同步執行，而拿到號碼先去做別的事情的就是異步執行；透過Event Loop 的特性，在JavaScript 處裡異步事件可說是輕而易舉的

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

回呼函數

我們最熟悉最的就是回呼函數了。例如網頁與使用者互動時註冊的事件監聽器，就需要接收一個回呼函數；或是其他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 被執行後，當過了指定的時間間隔之後，回呼函數會被放到佇列的末端，再等待事件循環處理到它。

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

回呼函數雖然在開發中十分常見，但也有許多難以避免的問題。例如由於函數需要傳遞給其他函數，開發者難以掌控其他函數內的處理邏輯；又因為回呼函數只能配合try … catch 捕捉錯誤，當非同步錯誤發生時難以控制；另外還有最著名的“回調地獄”。

Promise

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

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 引擎會先確認微任務佇列有沒有東西，有的話就優先執行，直到清空後才從佇列拿出新任務到棧上。

如上面的例子，當函數回傳一個 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 秒就列印出數字：

總結

##本文簡單介紹了JavaScript 處理非同步的三種方式，並透過一些簡單的範例說明程式碼的執行順序；呼應前面提到的事件循環，再其中加入了微任務佇列的概念。希望幫你理解同步和非同步的應用。

更多程式相關知識，請造訪：

程式設計入門！ ！

以上是了解JavaScript中異步的處理方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！