Promise, Async, Await 真是個好物
前幾天在寫「Firebase Performance」這一篇時,看見它的範例碼裡有用 async function XXX() { const XX = await XXXXXX }
這段,發現很多教學裡都開始寫 async, await,才想說來認真看一下。
然後,又看到這是 async 是 ES7 中針對 Promise 的語法糖,雖然 Promise 偶爾也會用一下,但一知半解,所以就先回頭看了 Promise 的教學。
看了 Promise 的教學後,發現這可以解決很多實務上遇到的問題,比方很多篇都寫到的 callback 地獄,才剛覺得 Promise 是個好物,誰知道看完了 async, await 教學後,更是覺得這是好物中的好物!還有 polyfil 可以支援到上古神獸IE,看來以後會很常用了。
本篇就是筆記 Promise、Async、Await 的基本使用,推薦的教學文是這 2 篇,看完後就可以懂了:
阮一峰大大:Promise 對象
Oxxo Studio:簡單理解 JavaScript Async 和 Await
Promise 使用
Promise 是一個 function 中 new 出來的,基本構造如下:
resolve(XXX)
,XXX 可以丟參數,就會是 then(XXX)
的XXX。
reject(XXX)
,XXX 可以丟參數,就會是 catch(XXX)
的XXX。
一個實際的範例如下:
為了再更好理解,再寫了一個實際的範例如下:
getJSON 的 URL 換成一個一定會失敗的,就可以看見 err 的錯誤訊息。
Promise polyfill
附上 Promise 的 polyfill:
https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js
直接在頁面上引用就行,npm promise-polyfill 上說明可讓 Promise 支援到:
IE8+, Chrome, Firefox, IOS 4+, Safari 5+, Opera
Async, Await 使用
await
要包在 async
裡。
包在 async
裡的 code,都照 await
的排序執行,前一個 await
執行完,才執行下一個。
async, await 的基本架構如下:
看上去,async 就很像是 Promise 的連續技,上面的 Demo 就是 4 連擊的感覺。
把 Promise 第三個 getJSON 的範例,改成 async, await 的方式就可以寫成以下:
這解決掉了需要多次 AJAX 的問題,真的是好物。
Async, Await polyfill
附上一個 polyfill,可支援 Promise, async, await 這三個語法。
https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js
筆記後心得
Promise, async, await,覺得又是一個前端必學的語法,可以很有效的解決以前遇到的問題。
目前已經打算把自己寫的 Telegram Bot 給優化一下,把抓 RSS、API 的方式都改成 async
。
花一點時間看一下第一段中推薦的 2 篇教學文,可以很快就上手。

