JavaScript async/await
更新於 發佈於 閱讀時間約 1 分鐘
上篇介紹的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簡單的分為成功跟失敗兩大塊，不只可讀性較高，也方便做成功/失敗流程的邏輯撰寫。
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
分享一個有趣的套件，名為 await-to-js。
可以讓 Promise 與 await 的寫法更簡潔。
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
看到標題的朋友可能會覺得奇怪， 我們常常看到的不就是time.sleep嗎？ 怎麼又多出了asyncio.sleep呢？ 這兩者究竟差異在哪邊呢？
我們都知道sleep就是睡眠的意思， 那麼在程式的運作上就是等待， 等待一段時間之後繼續完成任務， time.sleep的部份很好理解， 就是在該段程
認識 async/await基本概念：
async 的本質是 promise 的語法糖 ，只要 function 標記為 async，就表示裡頭可以撰寫 await 的同步語法，而 await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( re
什麼是 Promise.all？
在有多個 Promise 的時候，使用 Promise.all 可以確保「所有的 Promise 都執行完以後，才進入 then」。
Promise.all 語法結構：
Promise.all 接受的參數是陣列形式。
什麼時候要使用 Promise.all？
※ Promise基本介紹
什麼是 Promise？
Promise 是 JavaScript 的一個構造函式，用於創建表示非同步操作的物件實例。使用 new Promise() 時，你會創建一個包含非同步操作的實例，這個實例可以透過其繼承的方法如 then(), catch(), 和 fina
※ 同步概念：
單純地「由上而下」執行程式碼，而且一次只執行一件事，也就是「按順序執行，一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢，才能繼續往下走。
※ 非同步概念：
盡可能讓主要的執行程序不需要停下來等待，若遇到要等待的事情，就發起一個「非同步處理」，讓主程序繼續執行，
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async，它是一種並發程式模型(concurrent programming model)，其目的就是讓多個任務能同時在作業系統的執行緒上執行，並透過 async/.await 保留同步。
為什麼需要非同步？ 我們在「【Web微知識系列】 Web Workers」有介紹到在瀏覽器可執行腳本Javascript環境底下如何完成非同步的操作， 主要是為了讓任務更有效率的進行， 不會因為一個非常耗時的工作堵塞住整個服務， 導致無法服務他人的窘境。
大家應該經常在餐廳裡會看到服務員協
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
分享一個有趣的套件，名為 await-to-js。
可以讓 Promise 與 await 的寫法更簡潔。
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
看到標題的朋友可能會覺得奇怪， 我們常常看到的不就是time.sleep嗎？ 怎麼又多出了asyncio.sleep呢？ 這兩者究竟差異在哪邊呢？
我們都知道sleep就是睡眠的意思， 那麼在程式的運作上就是等待， 等待一段時間之後繼續完成任務， time.sleep的部份很好理解， 就是在該段程
認識 async/await基本概念：
async 的本質是 promise 的語法糖 ，只要 function 標記為 async，就表示裡頭可以撰寫 await 的同步語法，而 await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( re
什麼是 Promise.all？
在有多個 Promise 的時候，使用 Promise.all 可以確保「所有的 Promise 都執行完以後，才進入 then」。
Promise.all 語法結構：
Promise.all 接受的參數是陣列形式。
什麼時候要使用 Promise.all？
※ Promise基本介紹
什麼是 Promise？
Promise 是 JavaScript 的一個構造函式，用於創建表示非同步操作的物件實例。使用 new Promise() 時，你會創建一個包含非同步操作的實例，這個實例可以透過其繼承的方法如 then(), catch(), 和 fina
※ 同步概念：
單純地「由上而下」執行程式碼，而且一次只執行一件事，也就是「按順序執行，一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢，才能繼續往下走。
※ 非同步概念：
盡可能讓主要的執行程序不需要停下來等待，若遇到要等待的事情，就發起一個「非同步處理」，讓主程序繼續執行，
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async，它是一種並發程式模型(concurrent programming model)，其目的就是讓多個任務能同時在作業系統的執行緒上執行，並透過 async/.await 保留同步。
為什麼需要非同步？ 我們在「【Web微知識系列】 Web Workers」有介紹到在瀏覽器可執行腳本Javascript環境底下如何完成非同步的操作， 主要是為了讓任務更有效率的進行， 不會因為一個非常耗時的工作堵塞住整個服務， 導致無法服務他人的窘境。
大家應該經常在餐廳裡會看到服務員協