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

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

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

前言

在現代的網頁開發中，非同步操作變得越來越重要。本文將從基本概念出發，深入探討非同步操作的原理以及如何使用先進的 JavaScript 語法來處理非同步情境。

此篇會講解非同步的 JavaScript

1. 非同步
2. Promise & Fetch
3. Async & Await
4. 建構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 白話文運動 01-JavaScript ES6

React 白話文運動 02-JavaScript ES6 Object

為何大公司都使用Nx ? Monorepo工具 5 分鐘快速建置

你真的懂Monorepo？ 5 分鐘帶你認識前端大型架構

Zustand 是什麼？ React 前端狀態管理