JavaScript 程式札記 : async/await

更新於 2024/09/24閱讀時間約 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
本文探討了複利效應的重要性,並藉由巴菲特的投資理念,說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式,不僅能減少情緒影響,還能持續參與全球股市的發展。此外,文中介紹了使用國泰 Cube App 的便利性及低手續費,幫助投資者簡化投資流程,達成長期穩定增長的財務目標。
Thumbnail
工作上固定頻率會收到User提供的設定需求資訊,檔案大多為excel的格式.xlsx或.xls,需要擷取內容的參數資訊,轉換撰寫sql語法寫入資料庫進行操作。 既然格式都是固定的,何不動手寫個小工具,一鍵完成轉換呢?
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
本文將介紹 JavaScript 中的字符串基本操作,包括連接、長度和切割,以及進階的搜索、替換和正則表達式操作,讓你瞭解如何有效地處理和操作字符串。
Thumbnail
閉包(Closure)簡單來說就是一個 Function,應該說是 Function 內的 Function,而內層的變數記憶體不會被釋放,所以即使外部函式已經執行完畢,仍然能記住並存取它自己所在的外部函式的變數。
Thumbnail
JSON 是一種數據交換格式,源於JavaScript,可讓程式設計師將拿到的資料結構從任何語言轉換成其他語言與平台可辨識的格式,由於其簡單、易讀和跨平台的兼容性,在Web開發中廣泛使用。
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
Thumbnail
本文探討了複利效應的重要性,並藉由巴菲特的投資理念,說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式,不僅能減少情緒影響,還能持續參與全球股市的發展。此外,文中介紹了使用國泰 Cube App 的便利性及低手續費,幫助投資者簡化投資流程,達成長期穩定增長的財務目標。
Thumbnail
工作上固定頻率會收到User提供的設定需求資訊,檔案大多為excel的格式.xlsx或.xls,需要擷取內容的參數資訊,轉換撰寫sql語法寫入資料庫進行操作。 既然格式都是固定的,何不動手寫個小工具,一鍵完成轉換呢?
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
本文將介紹 JavaScript 中的字符串基本操作,包括連接、長度和切割,以及進階的搜索、替換和正則表達式操作,讓你瞭解如何有效地處理和操作字符串。
Thumbnail
閉包(Closure)簡單來說就是一個 Function,應該說是 Function 內的 Function,而內層的變數記憶體不會被釋放,所以即使外部函式已經執行完畢,仍然能記住並存取它自己所在的外部函式的變數。
Thumbnail
JSON 是一種數據交換格式,源於JavaScript,可讓程式設計師將拿到的資料結構從任何語言轉換成其他語言與平台可辨識的格式,由於其簡單、易讀和跨平台的兼容性,在Web開發中廣泛使用。
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架