XHR 與 Fetch，面試官的「小心機」！！！

2024-03-11碼農

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

現如今，網站開發普遍采用前後端分離的模式，數據互動成為了不可或缺的關鍵環節。在這個過程中， XHR 和 Fetch API 是兩種最常見的方法，用於從 Web 伺服器獲取數據。 XHR 是一種傳統的數據請求方式，而 Fetch API 則代表了現代 Web 開發的新興標準。接下來，我們將一同深入學習它們的使用方法和適用場景。

XMLHttpRequest

XMLHttpRequest ，通常簡稱為 XHR。透過 XMLHttpRequest 可以在不重新整理頁面的情況下請求特定 URL，獲取數據。XMLHttpRequest 在 AJAX 編程中（比如 jquery）被大量使用。

AJAX ：異步 JavaScript 和 XML。許多人容易把它和 jq 的 ajax 混淆。它是一個技術統稱，本身不是一種技術。

特點

異步請求 ：XHR 允許進行異步請求，它可以在後台執行，而不會阻止頁面的其他操作。
支持跨域請求 ：透過伺服器端設定允許跨域請求，從不同域的伺服器獲取數據。
事件驅動 ：提供了 onload 、 onerror 、 onprogress 等一系列事件來監聽請求的狀態變化。
靈活性 ：提供了對請求頭、響應頭以及請求方法的完全控制，使其非常靈活。

工作原理

XHR 的工作原理主要為：

建立 XHR 物件例項：透過 new XMLHttpRequest() 建立一個 XHR 物件。
配置請求：使用 open() 方法設定請求方法（GET、POST 等）、URL，以及是否要異步執行請求。
設定回呼函式：設定事件處理常式來處理請求完成、成功、失敗等不同的狀態。
發起請求：使用 send() 方法發送請求。
處理響應：在事件處理常式中處理響應數據，通常使用 responseText 或 responseXML 來存取響應內容。

// 建立一個新的XHR物件 const xhr = new XMLHttpRequest(); // 配置請求 xhr.open("GET", "https://api.baidu.com/test", true); // 設定響應處理常式 xhr.onload = function() { if (xhr.status === 200) { // 請求成功 const responseData = xhr.responseText; console.log("成功獲取數據：", responseData); } else { // 請求失敗 console.error("請求失敗，狀態碼：" + xhr.status); } }; // 發起請求 xhr.send();

XHR 的響應處理通常在 onreadystatechange 事件處理常式中完成。在上面的例子中，我們等待 XHR 物件的狀態變為 4 （表示請求完成）並且 HTTP 狀態碼為 200 （表示成功響應）時，解析響應數據。

Fetch API

Fetch 是一種現代的數據網路請求 API，它旨在解決 XHR 的一些問題，提供了更強大、更靈活的方式來處理 HTTP 請求。可以理解為 XMLHttpRequest 的升級版。

特點

Promise 風格 ：Fetch API 使用 Promise 物件來處理異步請求，使程式碼更具可讀性和可維護性。
更簡單的語法 ：相較於 XHR，Fetch API 的語法更加簡單明了，通常只需要幾行程式碼來完成請求。
預設不接受跨域請求 ：為了安全性，Fetch API 預設不接受跨域請求，但可以透過 CORS （跨域資源共享）來進行配置。
更現代的架構 ：Fetch API 是建立在 Promise 和 Stream 之上的，支持更靈活的數據處理和流式傳輸。

工作原理

Fetch 的工作原理主要為：

使用 fetch() 函式建立請求：傳入要請求的 URL，以及可選的配置參數，例如請求方法、請求頭等。
處理響應： fetch() 返回一個 Promise，您可以使用 .then() 鏈式呼叫來處理響應數據，例如使用 .json() 方法解析 JSON 數據或 .text() 方法獲取文本數據。
錯誤處理：您可以使用 .catch() 方法來捕獲任何請求或響應的錯誤。
使用 async/await ：如果需要，您還可以使用 async/await 來更清晰地處理異步操作。

Fetch API 的特性和簡單的語法使它在許多前端計畫中成為首選工具。然而，它也有一些限制，例如不支持同步請求，因此需要謹慎使用。

fetch("https://api.baidu.com/test") .then(response => { if (!response.ok) { thrownewError("請求失敗，狀態碼：" + response.status); } return response.json(); }) .then(data => { // 請求成功，處理響應數據 console.log("成功獲取數據：", data); }) .catch(error => { // 請求失敗，處理錯誤 console.error(error); });