Ajax 之戰：XMLHttpRequest與Fetch API比較

banq發表於2022-04-20
XMLHTTPAPI

Ajax 是大多數 Web 應用程式背後的核心技術。它允許頁面向 Web 服務發出進一步的請求，因此無需頁面重新整理往返伺服器即可呈現資料。
Ajax一詞不是一種技術。相反，它指的是可以從客戶端指令碼載入伺服器資料的技術。多年來已經引入了幾種選擇。仍然有兩種主要方法，大多數 JavaScript 框架將使用一種或兩種方法。

XMLHttpRequest

XMLHttpRequest1999 年首次作為非標準 Internet Explorer 5.0 ActiveX 元件出現。微軟開發它是為了支援他們基於瀏覽器的 Outlook 版本。XML 是當時最流行（或被炒作）的資料格式，但XMLHttpRequest支援文字和尚未發明的 JSON。
XMLHttpRequest受到所有主流瀏覽器的支援，並於 2006 年成為官方 Web 標準。

const xhr = new XMLHttpRequest();
xhr.open("GET", "/service");

// state change event
xhr.onreadystatechange = () => {
  // is request complete?
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // request successful
    console.log(JSON.parse(xhr.responseText));
  } else {
    // request not successful
    console.log("HTTP error", xhr.status, xhr.statusText);
  }
};

// start request
xhr.send();


在請求的整個生命週期中，onreadystatechange回撥函式會執行數次。XMLHttpRequest物件的readyState屬性返回當前狀態。
  • 0 (uninitialized) - 請求未被初始化
  • 1 (載入中) - 伺服器連線建立
  • 2 (載入中) - 收到請求
  • 3 (互動式) - 處理請求
  • 4 (complete) - 請求完成，響應已準備好

在達到狀態4之前，函式幾乎無法做什麼事情。

Fetch
Fetch是一個現代的基於Promise的Ajax請求API，首次出現在2015年，並被大多數瀏覽器所支援。它不是建立在XMLHttpRequest的基礎上，並以更簡潔的語法提供更好的一致性。下面的Promise鏈與上面的XMLHttpRequest例子功能相同。

fetch("/service", { method: "GET" })
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch((err) => console.error("error:", err));


或者使用 async / await:：

try {
  const res = await fetch("/service", { method: "GET" }),
    json = await res.json();

  console.log(json);
} catch (err) {
  console.error("error:", err);
}



第一輪：Fetch獲勝
除了更乾淨、更簡潔的語法外，FetchAPI 還提供了一些優於老化的XMLHttpRequest：

  • 標頭、請求和響應物件
  • 快取控制
  • CORS 控制
  • 憑證控制
  • 重定向控制
  • 資料流
  • 伺服器端支援


第 2 輪：XMLHttpRequest獲勝
XMLHttpRequest但仍有一些技巧可以超越Fetch()：

  • 進度支援
  • 超時支援
  • 中止支援
  • 更明顯的故障檢測
  • 瀏覽器支援




 

相關文章