2021-09-13|閱讀時間 ‧ 約 2 分鐘

JavaScript async/await

上篇介紹的promise chain的寫法,是已經比原本好維護了沒錯,但是可讀性似乎還是有點不足,其實還可以改成用async/await的寫法,如下:
其中,async是非同步的意思,等於是把getData()這個function定義為非同步,因此從console可以看到,test是最先被print出來的。
其中 await 意思是要暫停 async function執行,等Promise resolve時回傳resolve的value,後續繼續執行async function。若Promise reject時,則跑catch流程。
console:
以下我刻意讓後端response的data不是json格式,讓promise reject,console如下:
以下比較一下改良promise前後的程式碼差別:
改寫後,左邊少了.then() ... .catch(),程式碼看起來簡潔了許多,可讀性比較高,promise chain越多就會越明顯感覺到可讀性的差異。
從這邊可以看出,async/await其實就是為了簡化Promise操作而誕生的,用一般常用的try catch簡單的分為成功跟失敗兩大塊,不只可讀性較高,也方便做成功/失敗流程的邏輯撰寫。
分享至
成為作者繼續創作的動力吧!
小弟是一位軟體工程師,樂於幫助他人,撰寫技術文章除了幫助自己複習以外,也希望可以幫助到他人,若文章內容有誤,還請大大不吝給予指教!
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

發表回應

成為會員 後即可發表留言