JavaScript 程式札記 : async/await

更新於 發佈於 閱讀時間約 2 分鐘

什麼是 async/await?

asyncawait是建立在Promise基礎上的語法糖,讓我們可以用更直觀、更像同步程式的方式來寫非同步程式。

async function fetchData() {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
}

fetchData();

在上面的範例中,fetchData是一個async函式。在這個函式中,我們使用await關鍵字來等待fetchresponse.json()這兩個Promise解決。這樣,我們就可以在非同步操作完成後,繼續執行後面的程式碼。

async/await 錯誤處理

當使用asyncawait時,我們也需要考慮到錯誤處理。最常見的方式是使用try/catch

async function fetchData() {
try {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.error("發生錯誤:", error);
}
}

fetchData();

在上面的範例中,如果fetchresponse.json()發生錯誤,我們會捕捉到這個錯誤,並在控制台輸出錯誤訊息。 

async/await 的優點

使用asyncawait的最大優點是它讓非同步程式碼看起來更像同步程式碼,更容易閱讀和理解。你不再需要使用大量的.then().catch(),也不需要處理複雜的回調函式。

此外,asyncawait也讓錯誤處理變得更簡單。你可以使用標準的try/catch結構,而不是在每個Promise後面都加上.catch()

總之,asyncawait提供了一個簡潔、直觀的方式來寫非同步程式碼,讓程式更容易維護和擴展。


😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
Promise 是 JavaScript 中用於非同步操作的一個物件。當你需要執行一個可能需要一些時間的操作,例如從伺服器取得資料,而你不希望整個程式都停下來等待這個操作完成,這時候就可以使用 Promise。
SQL 是一種專門用來和資料庫進行溝通的程式語言,它讓我們能夠創建資料表、新增、查詢、修改和刪除資料庫中的資料,本文將介紹基本的創建、新增、查詢、修改和刪除的 SQL 語法。
當你在網路上購物或查詢資料時,有時候會發現網頁的某部分內容會自動更新,而不需要重新整理整個頁面,這背後的技術就叫做 AJAX。AJAX 是 "Asynchronous JavaScript and XML" ,意思是使用 JavaScript 以非同步的方式和伺服器交換資料。
Promise 是 JavaScript 中用於非同步操作的一個物件。當你需要執行一個可能需要一些時間的操作,例如從伺服器取得資料,而你不希望整個程式都停下來等待這個操作完成,這時候就可以使用 Promise。
SQL 是一種專門用來和資料庫進行溝通的程式語言,它讓我們能夠創建資料表、新增、查詢、修改和刪除資料庫中的資料,本文將介紹基本的創建、新增、查詢、修改和刪除的 SQL 語法。
當你在網路上購物或查詢資料時,有時候會發現網頁的某部分內容會自動更新,而不需要重新整理整個頁面,這背後的技術就叫做 AJAX。AJAX 是 "Asynchronous JavaScript and XML" ,意思是使用 JavaScript 以非同步的方式和伺服器交換資料。
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
分享一個有趣的套件,名為 await-to-js。 可以讓 Promise 與 await 的寫法更簡潔。
Thumbnail
簡要說明 JavaScript 的 Event Loop JavaScript 是單執行緒 (single-threaded) 語言,這意味著它一次只能執行一件事,因此所有函式都需要排隊等待執行,這被稱為同步 (synchronous)。在同步操作中,若函式過多或過於複雜,會導致程式阻塞 (blo
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
※ 非同步概念總複習 為什麼要使用 Promise? 在 JavaScript 開發中,處理非同步操作是常見需求,涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂,稱為「回調地獄」,難以維護和理解。 Promise 是解決這問題的方法。它是一個物件(objec
Thumbnail
看到標題的朋友可能會覺得奇怪, 我們常常看到的不就是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
Thumbnail
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async,它是一種並發程式模型(concurrent programming model),其目的就是讓多個任務能同時在作業系統的執行緒上執行,並透過 async/.await 保留同步。
Thumbnail
為什麼需要非同步? 我們在「【Web微知識系列】 Web Workers」有介紹到在瀏覽器可執行腳本Javascript環境底下如何完成非同步的操作, 主要是為了讓任務更有效率的進行, 不會因為一個非常耗時的工作堵塞住整個服務, 導致無法服務他人的窘境。 大家應該經常在餐廳裡會看到服務員協
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
分享一個有趣的套件,名為 await-to-js。 可以讓 Promise 與 await 的寫法更簡潔。
Thumbnail
簡要說明 JavaScript 的 Event Loop JavaScript 是單執行緒 (single-threaded) 語言,這意味著它一次只能執行一件事,因此所有函式都需要排隊等待執行,這被稱為同步 (synchronous)。在同步操作中,若函式過多或過於複雜,會導致程式阻塞 (blo
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
※ 非同步概念總複習 為什麼要使用 Promise? 在 JavaScript 開發中,處理非同步操作是常見需求,涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂,稱為「回調地獄」,難以維護和理解。 Promise 是解決這問題的方法。它是一個物件(objec
Thumbnail
看到標題的朋友可能會覺得奇怪, 我們常常看到的不就是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
Thumbnail
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async,它是一種並發程式模型(concurrent programming model),其目的就是讓多個任務能同時在作業系統的執行緒上執行,並透過 async/.await 保留同步。
Thumbnail
為什麼需要非同步? 我們在「【Web微知識系列】 Web Workers」有介紹到在瀏覽器可執行腳本Javascript環境底下如何完成非同步的操作, 主要是為了讓任務更有效率的進行, 不會因為一個非常耗時的工作堵塞住整個服務, 導致無法服務他人的窘境。 大家應該經常在餐廳裡會看到服務員協