Promise、Async、Await 基本使用筆記

/

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.6.0/polyfill.min.js

筆記後心得

Promise, async, await,覺得又是一個前端必學的語法,可以很有效的解決以前遇到的問題。

目前已經打算把自己寫的 Telegram Bot 給優化一下,把抓 RSS、API 的方式都改成 async

花一點時間看一下第一段中推薦的 2 篇教學文,可以很快就上手。

Summary
Promise, Async, Await 基本使用筆記
Article Name
Promise, Async, Await 基本使用筆記
Description
本篇大綱:Promise, Async, Await 真是個好物、Promise使用、Promise polyfill、Async, Await使用、Async, Await polyfill、筆記後心得。Promise, async, await,可以很有效的解決以前遇到的問題。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

Markdown 常用語法筆記

PWA

PWA學習筆記-6:實際使用整體流程範例

Front-End

用 CSS :target 製作頁籤、手風琴功能

Front-End

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

Bot Slack

Slack 通知功能 可互動

Front-End

Word、Excel 合併列印功能使用筆記

Firebase Google

Firebase Authentication 第三方登入 – GitHub

Front-End WordPress

用原生 JavaScript 寫一組社群分享按鈕(FB、LINE、Twitter)

Bot Telegram

Telegram Login Widget,製作用 Telegram 登入功能

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言