【JS上課筆記】JavaScript 的非同步請求：AJAX、Fetch API

這一系列的文章為修習 Udemy 的 The Complete JavaScript Course 2022: From Zero to Expert! 這堂課時所做的筆記。

想實行非同步請求（asynchrnous request)，一定得先認識它：AJAX！

AJAX

AJAX 全名為 Asynchronous JavaScript And XML，透過 AJAX 這項技術，我們可以動態向遠端伺服器請求資料（request data）。讓我們在不需要重整網頁的情況下，就能夠即時地與伺服端交換資料。

✏️ AJAX 裡面的 X 代表XML。XML 是一種以前常用來交換資料的格式，現在多用 JSON！不過因為 AJAX 這個詞是以前當 XML 還盛行時所創的，所以才會包含 XML（即便現在已經很少用了）。

AJAX 的運作方式

當事件發生時（如載入網頁或是點擊按鈕）...

我們（瀏覽器）會透過 JS 創建一個 XMLHttpRequest 物件，並傳送請求（request）給網路伺服器
伺服器接收到請求後開始進行處理，完成後回應（response）瀏覽器
JS 負責處理回應

OK！你或許注意到了以上有個叫做 XMLHttpRequest 的酷東東～
它就是那位幫助我們實行非同步請求的大功臣...嗎？
以前是，但現在不是。

現在大家都在用 Fetch API，因為它比 XMLHttpRequest 更簡單方便。

接著簡單介紹 XMLHttpRequest 和 Fetch API 吧！

XMLHttpRequest

//1. 創建一個 XMLHttpRequest 物件
const request = new XMLHttpRequest();
//2. 打開 XMLHttpRequest 物件
request.open("GET", "url");
//3. 傳送請求給伺服器
request.send();
//4. 設定當伺服器回覆時要進行的動作
request.addEventListener("load", function(){
  console.log(this.responseText);
);

Fetch API

fetch('url', {options})
  .then(response => {
      //伺服器若有回應的話執行這裡，處理response
  }
  .catch(error =>{
      //如果沒有 response（沒有網路或是伺服器連線失敗）執行這行，處理錯誤
  }

fetch() 會傳送 request 給伺服器，只要伺服器有回應就會回傳一個 Promise 物件（內包含 response物件），接下來需使用 then() & catch() 來處理。

fetch 內的參數

url: 欲訪問的網址，必填
[options]: 若沒填，預設的 HTTP 請求方法為 GET

fetch(url, {
    method: 'POST', 
    mode: 'cors', 
    cache: 'no-cache', 
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json'
    },
    redirect: 'follow', 
    referrerPolicy: 'no-referrer', 
    body: JSON.stringify(data) // body內的資料類型一定要和header裡面標注的 "Content-Type" 相符
  });

之後再來寫一篇文章好好研究裡面的參數😅
不過可以先有個觀念是，我們傳送給伺服器的請求以及伺服器的回覆，都會有 header（資料內容以外的相關資訊） & body（資料內容）兩大區塊。