現如今，網站開發普遍採用前後端分離的模式，數據交互成爲了不可或缺的關鍵環節。在這個過程中，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) {
throw new Error("請求失敗，狀態碼：" + response.status);
}
return response.json();
})
.then(data => {
// 請求成功，處理響應數據
console.log("成功獲取數據：", data);
})
.catch(error => {
// 請求失敗，處理錯誤
console.error(error);
});
XHR 和 Fetch 的對比
XHR 和 Fetch 都用於進行 HTTP 請求，但它們之間存在一些關鍵區別：
- 語法： Fetch 使用 Promise，更直觀和易於理解。
- 跨域請求： Fetch 在跨域請求方面更靈活，支持 CORS。
- 流式傳輸： Fetch 支持可讀流，適用於大文件下載。
- 維護性： Fetch 更容易維護和擴展。
常用庫和插件
基於 XHR 封裝的庫
- jquery：一個 JavaScript 庫，提供了用於處理 DOM 操作、事件處理和 XHR 請求的便捷方法。
- axios：一個流行的 HTTP 請求庫，基於 XHR 開發，支持瀏覽器和 Node.js。
基於 fetch 封裝的庫
- redaxios：它具有與 axios 類似的 API，但更輕量級且適用於現代 Web 開發。
- umi-request：由 Umi 框架維護的網絡請求庫，提供了強大的攔截器、中間件和數據轉換功能。
總結
XMLHttpRequest (XHR) 和 Fetch API 都是前端開發中用於進行數據請求的有力工具。XHR 在傳統項目中仍然有用，而 Fetch API 則在現代 Web 開發中越來越流行。具體選擇哪個工具取決於項目的需求和開發團隊的偏好，希望本文對你有幫助！