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

先理解“同步”行為

要了解非同步行為，可以從“同步”行為來理解，同步就是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

筆記來源：

Udemy- The complete JS course 2023: From 0 to Expert