iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 11
2

https://ithelp.ithome.com.tw/upload/images/20190927/20111380Y4egrraH8o.jpg

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

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

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

同步?非同步?

那麼就進入正題吧。

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

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

大家還記得 前天的提到的買東西案例 嗎?情境 1 需要在店家前久候的就是同步執行,而得到取餐令牌可以去做別的事情的就是非同步執行;透過 Event Loop 的特性,在 JavaScript 處裡非同步事件可說是輕而易舉、稀鬆平常~

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

回呼函式

最熟悉最常出現的就是回呼函式了。例如網頁與使用者進行互動註冊的事件監聽器,就需要接收一個回呼函式;或是其他 Web API 的各種功能如 setTimeoutxhr,也都能透過傳遞回呼函式,並在使用者要求的時機觸發它。例如看一個 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 捕捉錯誤,當非同步錯誤發生時難以控制;以及最著名的「回呼地獄」。

callback hell

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

那麼就先到這邊吧,大家明天見囉~

參考資料

筆者

Gary

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

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


上一篇
10. [JS] 一般函式與箭頭函式的差異?
下一篇
12. [JS] 為什麼 typeof new Array() === 'object'?
系列文
前端三十 - 成為更好的前端工程師31

尚未有邦友留言

立即登入留言