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

學習

職場

國際

軟體開發

React 白話文運動

希望能透過「React框架白話文運動」系列文章，利用口語化語表以及簡單的程式碼範例，能讓讀者更明白React的各種應用。
系列文章會講述以下：
1. 了解 ES6 JavaScript 語法
2. 了解 React 的運作原理
3. 了解 React 的狀態管理
4. 使用 React Hook管理狀態並且存取資料


Hogan｜軟體工程師沙龍

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

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

職場產業

音樂藝文

<div class="draft-block draft--p left">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.</div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left">References for further learning:</div>
<div class="draft-block draft--p left">1. [w3schools JavaScript Async/Await]: https://www.w3schools.com/js/</div>
<div class="draft-block draft--p left">2. [IQRA Technology Async/Await in JavaScript]: https://iqratechnology.com/academy/javascript-training/</div>
<div class="draft-block draft--p left">3. [JavaTpoint JavaScript Tutorial]: https://www.javatpoint.com/javascript-tutorial</div>