JavaScript async/await

維克 (Vic Lin)

更新於 2024/09/12發佈於 2021/09/13閱讀時間約 2 分鐘

上篇介紹的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簡單的分為成功跟失敗兩大塊，不只可讀性較高，也方便做成功/失敗流程的邏輯撰寫。

本筆記參考:
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

#JavaScript

#async

#await

留言

留言分享你的想法！

Iqra Technology

2024/01/18

This insightful article by Vic Lin provides a clear and concise explanation of how async/await can be used to simplify Promise operations in JavaScript. The code examples effectively demonstrate the enhanced readability and maintenance benefits of transitioning from traditional promise chaining to async/await. The comparison before and after the improvement highlights the elegance of the async/await syntax. The article serves as a valuable resource for developers seeking a more streamlined and readable approach to handling asynchronous operations in JavaScript.References for further learning:1. [w3schools: JavaScript Async/Await](https://www.w3schools.com/js/js_async.asp)2. [IQRA Technology - Async/Await in JavaScript](https://www.iqratechnology.com/blog-details/async-await-in-javascript)3. [JavaTpoint - JavaScript Tutorial](https://www.javatpoint.com/javascript-tutorial)

Vic Lin的沙龍

20會員

161內容數

Vic Lin的沙龍的其他內容

2023/08/13

Vue 3.2 defineEmits 用法

父元件傳遞方法使用@ <template> ... <Login @modalClose="modalClose"/> ... </template> <script setup> const _modal = ref(); function m

2023/08/13

Vue 3.2 defineEmits 用法

父元件傳遞方法使用@ <template> ... <Login @modalClose="modalClose"/> ... </template> <script setup> const _modal = ref(); function m

2023/03/25

ASRock AMD DeskMini X300 超高CP自組筆記

前情提要由於我的筆電已經用了10年，無法再戰下去了，且有預算考量，加上使用電腦幾乎都是定點，只有偶爾回家的時候會需要攜帶，因此最終選擇了迷你電腦，體積小不占空間，又方便攜帶，剛好符合我的需求。菜單由於這台無法裝獨顯，所以CPU的部分選擇 AMD R5 3400G(含Vega 11內

2023/03/25

ASRock AMD DeskMini X300 超高CP自組筆記

2023/03/10

Nuxt3 使用 useFetch 取得數據

Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045

2023/03/10

Nuxt3 使用 useFetch 取得數據

Nuxt3中可使用useFetch來獲取數據，不須再引用axios，相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045

看更多

你可能也想看

阿千看世界

2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！

每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界所得稅線上申報

#2025所得稅#綜合所得稅#繳稅有回饋

2025/05/03

阿千看世界

2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！

#2025所得稅#綜合所得稅#繳稅有回饋

2025/05/03

科技巨頭解碼

NVDA 25Q1 財報 - 扣除中國因素，輝達的前方仍然沒有烏雲 | #276

全球科技產業的焦點，AKA 全村的希望 NVIDIA，於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1，實際日曆期間為今年二到四月)，交出了打敗了市場預期的成績單。然而，在銷售持續高速成長的同時，川普政府加大對於中國的晶片管制......

#NVDA#NVIDIA#輝達

2025/06/18

科技巨頭解碼

NVDA 25Q1 財報 - 扣除中國因素，輝達的前方仍然沒有烏雲 | #276

#NVDA#NVIDIA#輝達

2025/06/18

鱈魚的魚缸

回不去惹，用 await-to-js 讓你的 Promise 操作簡潔又俐落！

分享一個有趣的套件，名為 await-to-js。可以讓 Promise 與 await 的寫法更簡潔。

#JavaScript#TypeScript#Promise

2024/06/28

鱈魚的魚缸

回不去惹，用 await-to-js 讓你的 Promise 操作簡潔又俐落！

分享一個有趣的套件，名為 await-to-js。可以讓 Promise 與 await 的寫法更簡潔。

#JavaScript#TypeScript#Promise

2024/06/28

Soft Code

在 Rust 裡使用非同步(Asynchronous)

非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async，它是一種並發程式模型(concurrent programming model)，其目的就是讓多個任務能同時在作業系統的執行緒上執行，並透過 async/.await 保留同步。

#Rust

2024/01/28

Soft Code

在 Rust 裡使用非同步(Asynchronous)

#Rust

2024/01/28

Hogan｜軟體工程師沙龍

JavaScript Async & Await – React 白話文運動 03

歡迎來到 React 白話文運動第三篇，今天我們將深入探討 JavaScript 中的非同步操作，並介紹兩個重要的關鍵字：Async 與 Await。在這篇文章中，我們將透過實例演示非同步操作的概念，以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式。

#程式#React#JavaScript

2023/11/23

Hogan｜軟體工程師沙龍

JavaScript Async & Await – React 白話文運動 03

#程式#React#JavaScript

2023/11/23

Jeremy Ho的沙龍

JS 筆記 | callback, promise, async/await 的前世今生

JavaScript callback, promise, async-await

#JavaScript

2023/11/13

Jeremy Ho的沙龍

JS 筆記 | callback, promise, async/await 的前世今生

JavaScript callback, promise, async-await

#JavaScript

2023/11/13

SUPOAN的沙龍

[JavaScript] 究竟什麼是Event loop?

執行以上程式碼，然後看到了這個結果：為什麼「延遲0秒」的函式寫在上方，但在console印出的結果，它還是被排在第二順位？利用AC教材提供的youtube演講連結一窺究竟：演講提供了更多JS的細節概念，身為JS新手的我還在消化，但若針對教案提出的問題來回答，加上利用google大神查到MDN的

#javascript#computerscience#coding

2022/10/29

SUPOAN的沙龍

[JavaScript] 究竟什麼是Event loop?

#javascript#computerscience#coding

2022/10/29

張哲嘉的沙龍

[13] Compare axios, ajax, fetch

接下來要講前後端怎麼溝通，最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論，個人推薦使用 axios，那他們又有什麼優缺點呢？讓我簡單講解一下 ajax ajax 用法有點麻煩，要先引入 jQuery，用法如下 ajax 比起 axios 較為笨重也較不安全

#python

2022/10/07

張哲嘉的沙龍

[13] Compare axios, ajax, fetch

#python

2022/10/07

一代軍師

玩轉C#之【執行序-執行緒安全】

介紹委派的非同步方法可以透過BeginInvoke執行委派的非同步方法 Action<T>.BeginInvoke(<T> obj,AsyncCallback callback,Object @object) 第一個內容的 obj，只的是要傳入acction委派的參數第二個AsyncCallb

2022/09/27

2022/09/27

Javascript : Event Queue & Event Loop

前言這是第一次寫技術文章，但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容，並不能像其他大神可能分享一些很酷的技術，目標就單純是為了完成最後一週的作業(如下)。走入非同步之前執行環境(Execution Context) 執行環境堆疊 (Execution stack)

#ALPHACamp#自學#更認識Javascript

2022/08/16

Blockcyber的沙龍

Javascript : Event Queue & Event Loop

#ALPHACamp#自學#更認識Javascript

2022/08/16

Vic Lin的沙龍

JavaScript async/await

上篇介紹的promise chain的寫法，是已經比原本好維護了沒錯，但是可讀性似乎還是有點不足，其實還可以改成用async/await的寫法，如下: E 其中，async是非同步的意思，等於是把getData()這個function定義為非同步，因此從console可以看到，test是最先被pri

#JavaScript#async#await

2021/09/13