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


Posted by Annie-Chien on 2022-07-31

這一系列的文章為修習 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 的運作方式

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

  1. 我們(瀏覽器)會透過 JS 創建一個 XMLHttpRequest 物件,並傳送請求(request)給網路伺服器
  2. 伺服器接收到請求後開始進行處理,完成後回應(response)瀏覽器
  3. 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(資料內容)兩大區塊。

response 物件

我們用 fetch() 送出請求後,用 then() 接收伺服器回覆(一個 response 物件)。你會發現回傳的這個 response 物件並不是我們預期中資料的模樣,因為資料藏在「回應內容主體(response body)」裡,所以接著我們得想辦法來把資料取出來:

  • json():將資料轉成 JSON
  • text():將資料轉成純文字
  • blob():將資料轉成 blob(binary large object)物件

記得!被處理過的資料就無法再用其他方法取出資料囉

一些實用的 response 屬性

  • status: 回應狀態碼,判斷請求是否成功
  • ok: 如果 status 介於 200-299,則為 true

還在努力學習中,如有錯誤請不吝指正🙇🏻‍♀️

練習 fetch 的好幫手:
https://designer.mocky.io/design

其他資料:
https://www.w3schools.com/xml/ajax_intro.asp
https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX


#javascript #ajax







Related Posts

系統架構

系統架構

ESlint 錯誤訊息紀錄

ESlint 錯誤訊息紀錄

用 JavaScript 學習資料結構和演算法:字典(Dictionary)和雜湊表(Hash Table)篇

用 JavaScript 學習資料結構和演算法:字典(Dictionary)和雜湊表(Hash Table)篇


Comments