認識同步與非同步

「同步」，一次只做一件事情，他就會讓這些事情去排隊，再一件一件做，逐行執行。JavaScript就是一種「單執行續 (Single-Thread)」的語言。
「非同步」的概念則是剛好相反，同時可以做很多件事情，不需要等到前一件事情做完才做下一件事情。

那如果我們想要讓JS非同步執行的話該怎麼做呢？
JavaScript中也有一些語法專門處理非同步的執行，那就是Promise & Fetch以及Async & Await。

Promise & Fetch

Promise

一個非同步的請求（request）通常有兩種結果，成功與失敗，不過實際上會有三種狀態，分別為完成（Fulfilled）、失敗（Rejected）以及等待中（Pending）。透過Promise物件，可以讓我們清楚執行了一個非同步的請求當前的狀態。

Fetch

在沒有fetch函數之前，要獲得一個API資料是相當麻煩的，可能需要寫超過二十行以上的程式碼，然而ECMA為了使其更加方便，新增了fetch語法，只要短短一、兩行就可以完成「獲取API」資料。

fetch("https://api.thecatapi.com/v1/images/search")
    .then(res=>res.json)
    .then(console.log)
    .catch(console.error)

只要使用fetch函數，並且將網址當作引數（argument）傳入，透過then或是catch函數可以依序的執行接下來想要執行的程式。

Async & Await

另一個更常見也更泛用的非同步語法是使用Async & Await非同步函式（Async Function），比起Promise & Fetch，Async & Await的語法更簡潔易懂。
以下範例是將上面的Promise & Fetch方法改寫成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()

為什麼會用到非同步？

如果都是以同步的方式執行網頁會讓網頁處於一直在等待資料的狀態，假如今天是走的是非同步的話就可以設計成先回傳回來的資料先顯示後續的資料再慢慢顯示出來就好，這樣就不會讓網頁一直處於塞車的狀態，進而提升效能。