核心要點(diǎn)

• JavaScript 中，F(xiàn)etch API 和 XMLHttpRequest 都用於發(fā)出 HTTP 請求，但 Fetch API 通常被認(rèn)為更強(qiáng)大、更靈活，因?yàn)樗褂?Promise，簡化了代碼和錯誤處理。然而，並非所有瀏覽器都支持 Fetch API，特別是較舊的瀏覽器。
• XMLHttpRequest 雖然較舊且由於缺乏 Promise 而更複雜，但它在所有瀏覽器中都得到廣泛支持，並且默認(rèn)情況下會發(fā)送 Cookie，這對於需要 Cookie 進(jìn)行身份驗(yàn)證的服務(wù)器請求非常有用。
• Fetch API 並非 Ajax 技術(shù)的完全替代品，因?yàn)樗恢С炙?XHR 功能，並且某些選項(xiàng)可能很繁瑣。它也不支持超時，使得錯誤捕獲的實(shí)現(xiàn)更加複雜。
• 儘管 Fetch API 有其局限性，但它是 JavaScript 中發(fā)出 HTTP 請求的未來方向。但是，由於其相對較新且不斷變化，開發(fā)人員在未來幾年應(yīng)謹(jǐn)慎使用它。

XMLHttpRequest 與 Fetch API 的權(quán)衡比較

本文將比較 XMLHttpRequest 和其現(xiàn)代化的 Ajax 實(shí)現(xiàn) Fetch API 的優(yōu)缺點(diǎn)。 2019 年 3 月是 Ajax 的 20 週年紀(jì)念日（某種程度上）。 XMLHttpRequest 的第一個實(shí)現(xiàn)於 1999 年作為 IE5.0 的 ActiveX 組件發(fā)布（別問）。在此之前，也有一些方法可以在不進(jìn)行整頁刷新的情況下從服務(wù)器提取數(shù)據(jù)，但它們通常依賴於笨拙的技術(shù)，例如注入或第三方插件。微軟開發(fā) XMLHttpRequest 的主要目的是為其基於瀏覽器的 Outlook 郵件客戶端提供替代方案。

直到 2006 年，XMLHttpRequest 才成為 Web 標(biāo)準(zhǔn)，但它已在大多數(shù)瀏覽器中實(shí)現(xiàn)。它在 Gmail（2004 年）和 Google Maps（2005 年）中的採用導(dǎo)致 Jesse James Garrett 於 2005 年發(fā)表了文章《AJAX：一種新的 Web 應(yīng)用程序方法》。這個新術(shù)語使開發(fā)人員的關(guān)注點(diǎn)更加明確。

從 AJAX 到 Ajax

AJAX 是異步 JavaScript 和 XML 的縮寫。 “異步”肯定是正確的，但是：

1. 可能是 JavaScript，儘管 VBScript 和 Flash 也是可選的。
2. 有效負(fù)載不需要是 XML，儘管當(dāng)時 XML 很流行?？梢允褂萌魏螖?shù)據(jù)格式，而如今通常更喜歡 JSON。

我們現(xiàn)在使用“Ajax”作為泛指任何從服務(wù)器獲取數(shù)據(jù)並動態(tài)更新 DOM 而無需進(jìn)行整頁刷新的客戶端進(jìn)程的通用術(shù)語。 Ajax 是大多數(shù) Web 應(yīng)用程序和單頁應(yīng)用程序 (SPA) 的核心技術(shù)。

深入了解 XMLHttpRequest

以下 JavaScript 代碼展示了使用 XMLHttpRequest（通?？s寫為 XHR）對 http://www.miracleart.cn/link/f589a241141007eb225cd68eed7bc06c 發(fā)出基本的 HTTP GET 請求：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.miracleart.cn/link/f589a241141007eb225cd68eed7bc06c');

// 請求狀態(tài)更改事件
xhr.onreadystatechange = function() {

  // 請求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 請求成功 - 顯示響應(yīng)
    console.log(xhr.responseText);
  }
  else {
    // 請求錯誤
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 開始請求
xhr.send();

XMLHttpRequest 對像還有許多其他選項(xiàng)、事件和響應(yīng)屬性。例如，可以設(shè)置和檢測以毫秒為單位的超時：

// 設(shè)置超時
xhr.timeout = 3000; // 3 秒
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);

進(jìn)度事件可以報(bào)告長時間運(yùn)行的文件上傳：

// 上傳進(jìn)度
xhr.upload.onprogress = p => {
  console.log( Math.round((p.loaded / p.total) * 100) + '%') ;
};

選項(xiàng)的數(shù)量可能令人眼花繚亂，早期版本的 XMLHttpRequest 存在一些跨瀏覽器的不一致之處。因此，大多數(shù)庫和框架都提供 Ajax 包裝函數(shù)來處理複雜性，例如 jQuery.ajax() 方法：

// jQuery Ajax
$.ajax('http://www.miracleart.cn/link/f589a241141007eb225cd68eed7bc06c')
  .done(data => console.log(data))
  .fail((xhr, status) => console.log('error:', status));

快速了解 Fetch

Fetch API 是 XMLHttpRequest 的現(xiàn)代替代方案。通用的 Headers、Request 和 Response 接口提供一致性，而 Promise 允許更輕鬆地進(jìn)行鍊式操作和 async/await 而無需回調(diào)。上面的 XHR 示例可以轉(zhuǎn)換為更簡單的基於 Fetch 的代碼，它甚至可以解析返回的 JSON：

fetch(
    'http://www.miracleart.cn/link/f589a241141007eb225cd68eed7bc06c',
    { method: 'GET' }
  )
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

Fetch 簡潔、優(yōu)雅、易於理解，並且廣泛用於 PWA 服務(wù)工作者。 為什麼不使用它來代替古老的 XMLHttpRequest 呢？

不幸的是，Web 開發(fā)永遠(yuǎn)不會那麼簡單。 Fetch 還沒有完全替代 Ajax 技術(shù)……

瀏覽器支持

Fetch API 的支持度相當(dāng)好，但在所有版本的 Internet Explorer 中都會失敗。使用 2017 年之前的 Chrome、Firefox 和 Safari 版本的用戶也可能會遇到問題。這些用戶可能只佔(zhàn)您用戶群的一小部分……或者它可能是一個主要客戶。 在開始編碼之前務(wù)必檢查！

此外，F(xiàn)etch API 比較新，並且比成熟的 XHR 對象接收更多持續(xù)的更改。這些更新不太可能破壞代碼，但預(yù)計(jì)未來幾年需要進(jìn)行一些維護(hù)工作。

默認(rèn)情況下不包含 Cookie

與 XMLHttpRequest 不同，並非所有 Fetch 實(shí)現(xiàn)都會發(fā)送 Cookie，因此您的應(yīng)用程序的身份驗(yàn)證可能會失敗?？梢酝ㄟ^更改第二個參數(shù)中傳遞的初始化選項(xiàng)來解決此問題，例如：

fetch(
    'http://www.miracleart.cn/link/f589a241141007eb225cd68eed7bc06c',
    {
      method: 'GET',
      credentials: 'same-origin'
    }
  )

錯誤不會被拒絕

令人驚訝的是，HTTP 錯誤（例如 404 頁面未找到或 500 內(nèi)部服務(wù)器錯誤）不會導(dǎo)致 Fetch Promise 被拒絕；.catch() 永遠(yuǎn)不會運(yùn)行。它通常會解析，並將 response.ok 狀態(tài)設(shè)置為 false。

只有在無法完成請求時（例如網(wǎng)絡(luò)故障）才會發(fā)生拒絕。這會使錯誤捕獲的實(shí)現(xiàn)更加複雜。

不支持超時

Fetch 不支持超時，請求將持續(xù)瀏覽器選擇的時間。需要進(jìn)一步的代碼才能將 Fetch 包裝在另一個 Promise 中，例如：

// 帶有超時的 fetch
function fetchTimeout(url, init, timeout = 3000) {
  return new Promise((resolve, reject) => {
    fetch(url, init)
      .then(resolve)
      .catch(reject);
    setTimeout(reject, timeout);
  });
}

……或者可能使用 Promise.race()，它在 fetch 或超時首先完成時解析，例如：

Promise.race([
  fetch('http://url', { method: 'GET' }),
  new Promise(resolve => setTimeout(resolve, 3000))
])
  .then(response => console.log(response))

中止 Fetch

使用 xhr.abort() 可以輕鬆結(jié)束 XHR 請求，並且如果需要，可以使用 xhr.onabort 函數(shù)檢測此類事件。

多年來，中止 Fetch 是不可能的，但現(xiàn)在在實(shí)現(xiàn) AbortController API 的瀏覽器中已受支持。這會觸發(fā)一個信號，該信號可以傳遞給 Fetch 初始化對象：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.miracleart.cn/link/f589a241141007eb225cd68eed7bc06c');

// 請求狀態(tài)更改事件
xhr.onreadystatechange = function() {

  // 請求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 請求成功 - 顯示響應(yīng)
    console.log(xhr.responseText);
  }
  else {
    // 請求錯誤
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 開始請求
xhr.send();

通過調(diào)用 controller.abort(); 可以中止 Fetch。 Promise 會被拒絕，因此會調(diào)用 .catch() 函數(shù)。

沒有進(jìn)度

在撰寫本文時，F(xiàn)etch 不支持進(jìn)度事件。因此，無法報(bào)告文件上傳或類似的大型表單提交的狀態(tài)。

XMLHttpRequest 與 Fetch API？

最終，選擇權(quán)在你……除非你的應(yīng)用程序有需要上傳進(jìn)度條的 IE 客戶端。

對於更簡單的 Ajax 調(diào)用，XMLHttpRequest 是較低級別的，更複雜的，並且您將需要包裝函數(shù)。不幸的是，一旦您開始考慮超時的複雜性、調(diào)用中止和錯誤捕獲，F(xiàn)etch 也需要包裝函數(shù)。

您可以選擇與 Promise polyfill 結(jié)合使用的 Fetch polyfill，因此可以在 IE 中編寫 Fetch 代碼。但是，XHR 用作後備；並非每個選項(xiàng)都能按預(yù)期工作，例如，無論設(shè)置如何，都會發(fā)送 Cookie。

Fetch 是未來。但是，該 API 相對較新，它不提供所有 XHR 功能，並且某些選項(xiàng)很繁瑣。在未來幾年內(nèi)謹(jǐn)慎使用它。

關(guān)於 XMLHttpRequest 和 Fetch API 的常見問題解答 (FAQ)

XMLHttpRequest 和 Fetch API 之間的主要區(qū)別是什麼？

XMLHttpRequest 和 Fetch API 都用於在 JavaScript 中發(fā)出 HTTP 請求。但是，它們在幾個方面有所不同。 Fetch API 是一種較新的技術(shù)，被認(rèn)為更強(qiáng)大、更靈活。它返回一個 Promise，該 Promise 解析為對該請求的響應(yīng)，無論其是否成功。 Fetch 還提供了 Request 和 Response 對象的通用定義。另一方面，XMLHttpRequest 比較舊，不使用 Promise，這可能會使代碼更複雜，更難以維護(hù)。它沒有 Request 和 Response 對象的通用定義。

Fetch API 比 XMLHttpRequest 好嗎？

由於使用了 Promise，F(xiàn)etch API 通常被認(rèn)為是 JavaScript 中發(fā)出 HTTP 請求的更好選擇。 Promise 使代碼更簡潔、更易於閱讀，並且還使錯誤處理更容易。 Fetch API 的功能也比 XMLHttpRequest 更強(qiáng)大、更靈活。但是，XMLHttpRequest 仍然被廣泛使用和支持，並且在某些情況下可能是更好的選擇，例如當(dāng)您需要支持不支持 Fetch API 的較舊瀏覽器時。

Fetch API 可以替換 XMLHttpRequest 嗎？

是的，F(xiàn)etch API 可以替換 JavaScript 中用於發(fā)出 HTTP 請求的 XMLHttpRequest。 Fetch API 是一種較新的技術(shù)，並且具有更強(qiáng)大、更靈活的功能集。它使用 Promise，這使得代碼更簡潔、更易於閱讀，並且還使錯誤處理更容易。但是，XMLHttpRequest 仍然被廣泛使用和支持，並且在某些情況下可能是更好的選擇，例如當(dāng)您需要支持不支持 Fetch API 的較舊瀏覽器時。

使用 Fetch API 的優(yōu)點(diǎn)是什麼？

Fetch API 比 XMLHttpRequest 具有多個優(yōu)點(diǎn)。它使用 Promise，這使得代碼更簡潔、更易於閱讀，並且還使錯誤處理更容易。 Fetch API 還具有更強(qiáng)大、更靈活的功能集，包括 Request 和 Response 對象的通用定義。它還允許您向其他來源發(fā)出請求，而 XMLHttpRequest 則不允許。

使用 Fetch API 的缺點(diǎn)是什麼？

使用 Fetch API 的主要缺點(diǎn)之一是並非所有瀏覽器都支持它。特別是較舊的瀏覽器可能不支持 Fetch API。在這些情況下，您可能需要使用 XMLHttpRequest 或 polyfill。另一個缺點(diǎn)是 Fetch API 默認(rèn)情況下不會發(fā)送 Cookie，因此如果您想發(fā)送 Cookie，則需要手動設(shè)置 credentials 選項(xiàng)為“include”。

使用 XMLHttpRequest 的優(yōu)點(diǎn)是什麼？

XMLHttpRequest 是一種經(jīng)過驗(yàn)證的技術(shù)，用於在 JavaScript 中發(fā)出 HTTP 請求。它得到廣泛支持，並且可以在所有瀏覽器中使用。與 Fetch API 不同，XMLHttpRequest 還會默認(rèn)發(fā)送 Cookie。在某些情況下，這可能是一個優(yōu)勢，例如當(dāng)您向需要 Cookie 進(jìn)行身份驗(yàn)證的服務(wù)器發(fā)出請求時。

使用 XMLHttpRequest 的缺點(diǎn)是什麼？

XMLHttpRequest 不使用 Promise，這可能會使代碼更複雜，更難以維護(hù)。它也沒有 Request 和 Response 對象的通用定義，並且不允許您向其他來源發(fā)出請求。與 Fetch API 等較新的技術(shù)相比，XMLHttpRequest 也被認(rèn)為有點(diǎn)過時了。

如何選擇 XMLHttpRequest 和 Fetch API？

選擇 XMLHttpRequest 和 Fetch API 取決於您的特定需求以及您需要支持的瀏覽器。如果您需要支持不支持 Fetch API 的較舊瀏覽器，那麼 XMLHttpRequest 可能是更好的選擇。但是，如果您使用的是較新的瀏覽器，並且想要利用 Fetch API 更簡潔、更現(xiàn)代的語法以及更強(qiáng)大、更靈活的功能集，那麼 Fetch API 將是更好的選擇。

我可以在同一個項(xiàng)目中同時使用 XMLHttpRequest 和 Fetch API 嗎？

是的，您可以在同一個項(xiàng)目中同時使用 XMLHttpRequest 和 Fetch API。您可以根據(jù)您的特定需求以及您需要支持的瀏覽器，選擇對某些任務(wù)使用 XMLHttpRequest，對其他任務(wù)使用 Fetch API。但是，通常建議為了一致性和易於維護(hù)而堅(jiān)持使用其中一種。

是否有任何替代 XMLHttpRequest 和 Fetch API 用於在 JavaScript 中發(fā)出 HTTP 請求的方案？

是的，有幾種替代 XMLHttpRequest 和 Fetch API 用於在 JavaScript 中發(fā)出 HTTP 請求的方案。這些包括 Axios、jQuery 的 $.ajax 和 SuperAgent 等庫。這些庫提供了更高級別的接口來發(fā)出 HTTP 請求，並且與 XMLHttpRequest 和 Fetch API 相比，可以提供其他功能和便利。

以上是XMLHTTPREQUEST與Ajax的提取API的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！