Promise, Async, Await 基本使用筆記

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
Publisher Logo
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言