JavaScript async/await

更新 發佈閱讀 2 分鐘

上篇介紹的promise chain的寫法,是已經比原本好維護了沒錯,但是可讀性似乎還是有點不足,其實還可以改成用async/await的寫法,如下:


其中,async是非同步的意思,等於是把getData()這個function定義為非同步,因此從console可以看到,test是最先被print出來的。

其中 await 意思是要暫停 async function執行,等Promise resolve時回傳resolve的value,後續繼續執行async function。若Promise reject時,則跑catch流程。

console:

raw-image

以下我刻意讓後端response的data不是json格式,讓promise reject,console如下:

raw-image

以下比較一下改良promise前後的程式碼差別:

raw-image

改寫後,左邊少了.then() ... .catch(),程式碼看起來簡潔了許多,可讀性比較高,promise chain越多就會越明顯感覺到可讀性的差異。

從這邊可以看出,async/await其實就是為了簡化Promise操作而誕生的,用一般常用的try catch簡單的分為成功跟失敗兩大塊,不只可讀性較高,也方便做成功/失敗流程的邏輯撰寫。


本筆記參考:
1. https://wcc723.github.io/development/2020/10/16/async-await/
2. https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/await
3. https://ithelp.ithome.com.tw/articles/10227935

留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
嗨大家好!我是重度網購患者賴床鴨鴨!每年最期待的蝦皮12.12又要來了,我的購物車也早已瀕臨爆炸邊緣。 尤其是我最近在做的「高速負離子吹風機」評比,一口氣比較了5款,每台都想帶回家!但身為一個精打細算的小資族,我發現了一個天大的祕密:原來在蝦皮購物,居然可以不只省錢,還能偷偷賺錢! 今天這篇,我
Thumbnail
嗨大家好!我是重度網購患者賴床鴨鴨!每年最期待的蝦皮12.12又要來了,我的購物車也早已瀕臨爆炸邊緣。 尤其是我最近在做的「高速負離子吹風機」評比,一口氣比較了5款,每台都想帶回家!但身為一個精打細算的小資族,我發現了一個天大的祕密:原來在蝦皮購物,居然可以不只省錢,還能偷偷賺錢! 今天這篇,我
Thumbnail
又到了每年最溫(ㄏㄨㄚ)馨(ㄑㄧㄢˊ)的季節,其實在還單身的時候,我並沒有特別喜愛這個節日,但自從去了歐洲生活,再加上有了孩子後,對於聖誕節的好感與日俱增,除了要幫孩子準備聖誕禮物,還需要幫家佈置一下才有儀式感,若你對於今年的聖誕禮物還沒有頭緒?趁著蝦皮雙12的優惠,快來看看我買了什麼吧!
Thumbnail
又到了每年最溫(ㄏㄨㄚ)馨(ㄑㄧㄢˊ)的季節,其實在還單身的時候,我並沒有特別喜愛這個節日,但自從去了歐洲生活,再加上有了孩子後,對於聖誕節的好感與日俱增,除了要幫孩子準備聖誕禮物,還需要幫家佈置一下才有儀式感,若你對於今年的聖誕禮物還沒有頭緒?趁著蝦皮雙12的優惠,快來看看我買了什麼吧!
Thumbnail
來了來了~~~購物狂最期待的大日子真的就是-蝦皮 12.12,折扣真的一年比一年還誇張,價格越殺越狠,各種免運、滿額折、品牌券直接發到領不完! 從這裡加入我的分潤連結:https://s.shopee.tw/7fSd8GVvNC 推薦碼請填:A6ZVDYE
Thumbnail
來了來了~~~購物狂最期待的大日子真的就是-蝦皮 12.12,折扣真的一年比一年還誇張,價格越殺越狠,各種免運、滿額折、品牌券直接發到領不完! 從這裡加入我的分潤連結:https://s.shopee.tw/7fSd8GVvNC 推薦碼請填:A6ZVDYE
Thumbnail
分享一個有趣的套件,名為 await-to-js。 可以讓 Promise 與 await 的寫法更簡潔。
Thumbnail
分享一個有趣的套件,名為 await-to-js。 可以讓 Promise 與 await 的寫法更簡潔。
Thumbnail
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async,它是一種並發程式模型(concurrent programming model),其目的就是讓多個任務能同時在作業系統的執行緒上執行,並透過 async/.await 保留同步。
Thumbnail
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async,它是一種並發程式模型(concurrent programming model),其目的就是讓多個任務能同時在作業系統的執行緒上執行,並透過 async/.await 保留同步。
Thumbnail
歡迎來到 React 白話文運動第三篇,今天我們將深入探討 JavaScript 中的非同步操作,並介紹兩個重要的關鍵字:Async 與 Await。在這篇文章中,我們將透過實例演示非同步操作的概念,以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式。
Thumbnail
歡迎來到 React 白話文運動第三篇,今天我們將深入探討 JavaScript 中的非同步操作,並介紹兩個重要的關鍵字:Async 與 Await。在這篇文章中,我們將透過實例演示非同步操作的概念,以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式。
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
接下來要講前後端怎麼溝通,最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論,個人推薦使用 axios,那他們又有什麼優缺點呢?讓我簡單講解一下 ajax ajax 用法有點麻煩,要先引入 jQuery,用法如下 ajax 比起 axios 較為笨重也較不安全
Thumbnail
接下來要講前後端怎麼溝通,最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論,個人推薦使用 axios,那他們又有什麼優缺點呢?讓我簡單講解一下 ajax ajax 用法有點麻煩,要先引入 jQuery,用法如下 ajax 比起 axios 較為笨重也較不安全
Thumbnail
介紹 委派的非同步方法 可以透過BeginInvoke執行委派的非同步方法 Action<T>.BeginInvoke(<T> obj,AsyncCallback callback,Object @object) 第一個內容的 obj,只的是要傳入acction委派的參數 第二個AsyncCallb
Thumbnail
介紹 委派的非同步方法 可以透過BeginInvoke執行委派的非同步方法 Action<T>.BeginInvoke(<T> obj,AsyncCallback callback,Object @object) 第一個內容的 obj,只的是要傳入acction委派的參數 第二個AsyncCallb
Thumbnail
前言 這是第一次寫技術文章,但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容,並不能像其他大神可能分享一些很酷的技術,目標就單純是為了完成最後一週的作業(如下)。 走入非同步之前 執行環境(Execution Context) 執行環境堆疊 (Execution stack)
Thumbnail
前言 這是第一次寫技術文章,但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容,並不能像其他大神可能分享一些很酷的技術,目標就單純是為了完成最後一週的作業(如下)。 走入非同步之前 執行環境(Execution Context) 執行環境堆疊 (Execution stack)
Thumbnail
上篇介紹的promise chain的寫法,是已經比原本好維護了沒錯,但是可讀性似乎還是有點不足,其實還可以改成用async/await的寫法,如下: E 其中,async是非同步的意思,等於是把getData()這個function定義為非同步,因此從console可以看到,test是最先被pri
Thumbnail
上篇介紹的promise chain的寫法,是已經比原本好維護了沒錯,但是可讀性似乎還是有點不足,其實還可以改成用async/await的寫法,如下: E 其中,async是非同步的意思,等於是把getData()這個function定義為非同步,因此從console可以看到,test是最先被pri
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News