在網站開發中，非同步的議題是所有站台必然需要處理的一環，也因為前端框架的興起，透過框架實現的 SPA 已經是現代快速建構網站的標配了，非同步取得資料也就成了不可或缺的一環；今天就讓我們一起來看看 JavaScript 中非同步的處理方式吧。

不過在開始之前，先讓我小小懺悔一下；我在 幾天前的文章 中用了一張梗圖，上面寫著：「2019 年了，不要再用 Table 排版了」，結果今天下班前就接到要切 HTML Email 通知信版型的需求。這難道就是現世報嗎？好吧 Table 很棒...我很抱歉 QQ

小知識：如同 JavaScript 的「一個規範、各自表述」一般，HTML Email 的執行環境可以簡單理解成各家廠商不完全依照 HTML、CSS 規範，各別實作的渲染引擎；常用的 CSS 屬性如 position、display: absolute 等屬性都不支援，幾乎只能依賴 Table 做出較複雜的排版。

本系列文已經重新編校彙整編輯成冊，並正式出版囉！
《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！
喜歡我文章內容的讀者們，歡迎您 前往購買 支持！

同步？非同步？

那麼就進入正題吧。

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

這兩個名詞對新手而言總是讓人感到困惑，畢竟從中文字面上的意思很容易讓人不小心就反過來理解，不過從電腦科學的角度來說，同步 指的是一件一件事情來，而 非同步 則是很多事情一起並行的在處理。

大家還記得 前天的提到的買東西案例 嗎？情境 1 需要在店家前久候的就是同步執行，而得到取餐令牌可以去做別的事情的就是非同步執行；透過 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 被執行後，在指定的時間間隔過了之後，回呼函式會被擺放到 Queue 的末端，再等待事件迴圈處理到它。

小補充：也因為前述的機制，開發者設定給 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 正是透過微任務序列來驅動它的；微任務序列的觸發時機，是在 Stack 清空時，JavaScript 引擎會先確認微任務序列有沒有東西，有的話就優先執行，直到清空後，才從 Queue 拿出新任務到 Stack 上。

如上面的範例，當函式回傳一個 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 問世後，非同步的程式碼從回呼地獄，漸漸變成了優雅的函數式管道處理，但在熟悉度不足的開發者手上，就只是從 Callback Hell 變成 Promise Hell 而已。

一年過去，ES7 規範了新的 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

這邊透過 Promise 將 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 處理非同步的三種方式，並透過一些簡單的範例，說明程式的執行順序；以及呼應先前提到的事件迴圈，再其中加入了微任務序列的概念。希望藉由以上的說明能幫助讀者您更理解同步非同步的應用。

那麼就先到這邊吧，大家明天見囉～

參考資料

• MDN - async function
• MDN - In depth: Microtasks and the JavaScript runtime environment
• Ronald Chen - How to escape Promise Hell
• Peter Chang - [Javascript] ES7 Async Await 聖經

筆者

Gary

半路出家網站工程師；半生熟的前端加上一點點的後端。
喜歡音樂，喜歡學習、分享，也喜歡當個遊戲宅。

相信一切安排都是最好的路。