JavaScript Async & Await – React 白話文運動 03
歡迎來到 React 白話文運動系列的第三篇，今天我們將深入探討 JavaScript 中的非同步操作，並介紹兩個重要的關鍵字：Async 與 Await。在這篇文章中，我們將透過實例演示非同步操作的概念，以及如何使用 Promise、Fetch、Async 和 Await 來更有效地處理非同步程式碼。
前言
在現代的網頁開發中，非同步操作變得越來越重要。本文將從基本概念出發，深入探討非同步操作的原理以及如何使用先進的 JavaScript 語法來處理非同步情境。
此篇會講解非同步的 JavaScript
- 非同步
- Promise & Fetch
- Async & Await
- 建構Promise 物件
以上有關於中文翻譯，目前採用 MDN 官方中譯，有筆誤也歡迎讀者留言
非同步（Asynchronous）
非同步在開發中是不可或缺的概念，在之前的程式碼中目前都是同步的（Synchronous）概念，指的是說程式會依序執行。
然而在開發一個網頁的過程中，有時候需要執行非同步的（Asynchronous）的動作，例如：使用者按下表單送出，必須要等待資料傳送完畢後，獲得伺服器端回傳的資料，才能知道是否成功。
如果在伺服器回傳結果前，就直接透過 JavaScript 執行畫面成功與否，反而會是錯誤的。
而現代 JavaScript 中也有一些語法專門處理非同步的執行，包含接下來介紹的 Promise 以及 Async & Await。
Promise & Fetch
Promise
一個非同步的請求（request）通常有兩種結果，成功與失敗，不過實際上會有三種狀態，分別為完成（Fulfilled）、失敗（Rejected）以及等待中（Pending）。透過Promise物件，可以讓我們清楚執行了一個非同步的請求當前的狀態。
Fetch
在沒有 fetch 函數之前，要獲得一個 API 資料是相當麻煩的，可能需要寫超過二十行以上的程式碼，然而 ECMA 為了使其更加方便，新增了 fetch 語法，只要短短一、兩行就可以完成「獲取 API 」資料。
直接用一個api實例來做舉例，這邊網路上找了一個免費的api
https://api.thecatapi.com/v1/images/search
讀者如果直接輸入於瀏覽器中，可以看到一個回傳的物件，裡面包含了id、url、width、height
那要如何使用程式碼，獲得 api 資料呢？
fetch("https://api.thecatapi.com/v1/images/search")
.then(res=>res.json)
.then(console.log)
.catch(console.error)
這邊只要使用 fetch 函數，並且將網址當作引數（argument）傳入，透過 then 或是 catch 函數可以依序的執行接下來想要執行的程式。
以上述程式碼來說，先打了一隻 api，透過第一個 then 函數獲得回傳結果，透過第二個 then 函數印出訊息。最後透過 catch 函數，如果失敗則會印出失敗訊息。
Async & Await
JavaScript Async
另一個更常見也更泛用的非同步語法是使用 Async & Await非同步函式（ Async Function），比起 Promise & Fetch，Async & Await 的語法更簡潔易懂，也比較符合我們的閱讀習慣。
如果以上面的 fetch then 改寫成 async & await 語法
const getCatData = async() => {
let res = await fetch("https://api.thecatapi.com/v1/images/search")
let { results } = await res.json()
console.log(results)
}
getCatData()
/*
[
{
id: "ac5",
url: "https://cdn2.thecatapi.com/images/ac5.jpg",
width: 565,
height: 551
}
]
*/
在函式中的第一行使用 async 關鍵字，告知電腦此為一個非同步函式，接下來只要在任何需要等待的非同步請求前面加上await關鍵字，即可完成此非同步函式。那麼我們要如何獲得失敗訊息呢？我們只要在 async & await 中，再加上 try & catch 語法，即可先執行 try 裡面的程式，並且在 catch 中處理 Promise 失敗的狀態
const getCatData = async() => {
try {
let res = await fetch("https://api.thecatapi.com/v1/images/search")
let { results } = await res.json()
console.log(results)
} catch (error) {
console.log(error)
}
}
getCatData()
建構Promise 物件
上上面已有提到Promise 總共有三種狀態，分別為完成（Fulfilled）、失敗（Rejected）以及等待中（Pending），不過以結果來說，最終都可以歸納為兩種結果，成功與失敗。因此在執行一個非同步函式，也可以將執行結果回傳，並且使用Promise物件去做儲存
const getCatData = () =>
new Promise((resolves, rejects) => {
const api = "https://api.thecatapi.com/v1/images/search"
const request = new XMLHttpRequest;
request.open("GET", api);
request.onload = () => {
request.status === 200 ?
resolves(JSON.parse(request.response).results) :
rejects(Error(request.statusText))
}
request.onerror = err => rejects(err);
request.send()
})
結語
這這篇講解了，非同步（Asynchronous）的概念以及一些實作，不過非同步本身是一個比較困難的概念，且其中的一些語法都是有點難度的，也歡迎讀者收藏此文章，未來都可以回過頭來複習此內容。 如果有任何建議與疑問也歡迎留言！如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～
備註
目前文章已移至 JavaScript ES6 – React 白話文運動 01
未來文章一併更新於此網站 Hogan.B Lab
觀看分類：React 白話文運動、其他系列
其他React文章參考
React 白話文運動 02-JavaScript ES6 Object
為何大公司都使用Nx ? Monorepo工具 5 分鐘快速建置
