JS-[非同步篇]-非同步 | Ajax

先理解“同步”行為

要了解非同步行為，可以從“同步”行為來理解，同步就是js原生程式碼，是逐行執行的。

同步行為，程式碼逐行執行，這會有什麼缺點呢？

阻塞：

今天js若要執行一個很長的任務，遇到像是伺服器請求或是alert視窗跳出，需要你等待伺服器請求回傳資料又或是，點擊alert視窗後，你的程式碼才會繼續行。這就會出現阻塞/block程式碼繼續執行下去

對應執行緒的執行文本內容：

逐行執行遇到的阻塞行為

非同步行為就是補足這個缺點

非同步的目標是基本上處理/執行js程式碼長時間的任務時，基本上都是在後台執行，以下為例：

非同步程式碼會在後台執行任務完畢時發生，並不會因為遇到計時器一定非得要等待5秒後才會執行下一段程式碼（non-blocking），也就是『非同步程式碼被延遲到未來才執行，這也是為了使逐行執行的js不會發生阻塞的行為，導致網頁掛點或暫停』

對應執行緒的執行文本內容：

回傳

但注意，上面這個意思不代表所有的callback fn 讓程式碼變成非同步喔！Timer只是一個非同步的例子，array方法map的callback就沒有非同步行為這點要釐清～～

非同步的js就是在一段時間內，協調程序的行為，最常見的用法是從遠程伺服器獲取數據(AJAX的調用)：接下來要同時學習，promise/fetch function/async await/ err

什麼是AJAX？

好朋友chatGPT定義的很清楚

AJAX雖然是沿用過去的名字，其字尾的X就是表示-XML，是一種數據格式，過去被廣泛用於網路上傳輸數據，現在基本上沒有API再使用XML數據了

現在的Api都是使用JSON數據格式，輕量簡便，基本上只是JS的對象，但會轉換為字符串，容易在網路上發送，一旦數據抵達，野可以在JS中使用
透過jonas的課程會帶學生體驗免費api取得的國家基本資料來做出一個小小的應用程式(下一章節)

#### 常見發出網路請求的JS寫法介紹：
＃JS原生寫法(不常用了):
1.XMLHttpRequest(寫法冗長)

function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET","http://www.example.org");
oReq.send();

2.Fetch API(new，瀏覽器支援度不一,)

fetch("http://www.example.or/movies.json")
.then(function(response) {
return response.json(); //須將回傳回來的回覆轉成json檔
})
.then(funtcion(myJson) {
console.log(myJson);
}

＃套件，須額外載入JS/CDN（最常用）
AXIOS（寫法精簡，底層仍然是XMLHttpRequest)

axios.get('/user/12345')
.then(function (response){
console.log(response.date);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
})

axios 套件連結

什麼是API?

JS有很多型態並且免費的API可以使用，常用的有

DOM API
Geolocation API
Own Class API
Online API（運行在web伺服器上的應用程式，他接收數據請求，並從資料庫中尋找數據，再將數據發送回覆給客服端）
自行構建的web API（需要後端基礎node.js）或第三方APIs
第三方有很多免費的API:
- weather data
- data about country
- 航班數據
- 貨幣轉換的資料
- 寄送email 或 sms的api
- google maps
- 無數種可能的api