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的沙龍

21會員

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

看更多

你可能也想看

Dr HI的眼科沙龍

光的選擇，就是視力的選擇— Philips 飛利浦 A5 軒博全光譜智能LED護眼檯燈

大家好，我是一名眼科醫師，也是一位孩子的媽身為眼科醫師的我，我知道視力發展對孩子來說有多關鍵。每到開學季時，診間便充斥著許多憂心忡忡的家屬。近年來看診中，兒童提早近視、眼睛疲勞的案例明顯增加，除了3C使用過度，最常被忽略的，就是照明品質。然而作為一位媽媽，孩子能在安全、舒適的環境

#momo購物網#Philips飛利浦#軒博

2025/04/30

Dr HI的眼科沙龍

光的選擇，就是視力的選擇— Philips 飛利浦 A5 軒博全光譜智能LED護眼檯燈

#momo購物網#Philips飛利浦#軒博

2025/04/30

方格子 vocus 官方沙龍

♥️ 5 月主題活動：我的媽呀！母親節快樂！

我的「媽」呀！母親節即將到來，vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常，或是一直想對她表達的感謝，又或者，是你這輩子最想聽她說出的一句話。也歡迎你曬出合照，分享照片背後的點點滴滴 ♥️ 透過創作，將這份情感表達出來吧！🥹

#母親節#媽媽美照#媽媽日常

2025/05/01

方格子 vocus 官方沙龍

♥️ 5 月主題活動：我的媽呀！母親節快樂！

#母親節#媽媽美照#媽媽日常

2025/05/01

鱈魚的魚缸

回不去惹，用 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