Fetch API 與 XMLHttpRequest

XMLHttpRequest 物件用於非同步地與伺服器通訊，這意味著我們可以在後臺與伺服器交換資料，而無需重新整理整個頁面。XMLHttpRequest 是最常用的技術，因此大多數主流瀏覽器（如 Google Chrome、Safari、Mozilla Firefox 或 Opera）都使用它。它還支援純文字、JSON 資料和許多其他資料格式。它非常易於使用，並提供各種方法和屬性來執行操作。我們可以使用 `XMLHttpRequest()` 建構函式建立一個 XMLHttpRequest 物件。

語法

variableName = new XMLHttpRequest()

使用 `new` 關鍵字和 `XMLHttpRequest()` 建構函式，我們可以建立一個新的 XMLHttpRequest 物件。必須在呼叫 `open()` 函式初始化它之前建立此物件，然後才能呼叫 `send()` 函式將請求傳送到 Web 伺服器。

Fetch API 提供了一個用於從伺服器獲取/檢索資源的介面。它是 XMLHttpRequest 的現代替代方案。由於它支援請求和響應的通用定義，因此如果將來需要用於快取 API、Service Worker、處理或修改請求和響應等，我們可以訪問它們。它非常簡單、易用且一致。或者我們可以說，與 XMLHttpRequest 相比，它提供了一種現代且靈活的方法來建立 HTTP 請求和處理響應。它基於 Promise API，提供了清晰的語法和更好的錯誤處理。

語法

fetch(res)

其中 `fetch()` 接受一個必選引數 `res`。`res` 引數定義要獲取的資源，它可以是字串、任何其他物件或請求物件。除了必選引數外，它還可以接受一個可選引數，例如方法、頭部資訊、主體、模式快取、同源等。

Fetch API 與 XMLHttpRequest

以下是 Fetch API 和 XMLHttpRequest 之間的區別：

區別	Fetch API	XMLHttpRequest
語法	眾所周知，Fetch API 是基於 Promise 的 API，因此它提供了更清晰的語法和更好的錯誤處理方法。	XHR 基於回撥方法，其語法不如 Fetch API 好。
跨源資源共享 (CORS)	Fetch API 可以很好地處理 CORS 請求，無需任何額外配置。	XMLHttpRequest 需要特殊的配置才能處理或發出跨域請求。
請求和響應頭部資訊	Fetch API 提供了更靈活的方式來處理請求和響應頭部資訊。	XMLHttpRequest 提供了有限數量的方法來處理請求和響應頭部資訊。
流和解析	Fetch API 對流和解析大型響應提供了良好的支援，因此它可以提高效能並減少記憶體使用。	XMLHttpRequest 需要自定義程式才能獲得此功能。
瀏覽器相容性	Fetch API 比較新，因此可能不被舊版瀏覽器支援。	XMLHttpRequest 已經使用了多年，因此幾乎所有瀏覽器都支援它。
Cookie 和憑據控制	Fetch API 對 Cookie 和憑據提供了良好的控制，因此與 XMLHttpRequest 相比，我們可以輕鬆地進行身份驗證和授權。	XMLHttpRequest 對 Cookie 和憑據的支援較少。
超時	Fetch API 不支援超時，因此請求將持續到瀏覽器選擇請求為止。	XMLHttpRequest 支援超時。

結論

這些是 Fetch API 和 XMLHttpRequest 之間的主要區別。與 XMLHttpRequest 相比，Fetch API 更強大且更容易理解。它也受所有現代瀏覽器支援，但 XMLHttpRequest 僅受舊版瀏覽器支援。在下一篇文章中，我們將學習 `fetch()` 函式。

列印頁面