【譯】XMLHttpRequest和Fetch, 誰最適合AJAX？

原文地址：https://www.sitepoint.com/xmlhttprequest-vs-the-fetch-api-whats-best-for-ajax-in-2019/

目錄

• 從AJAX到Ajax
• XMLHttpRequest
• Fetch
  • 瀏覽器支持
  • 默認無Cookie
  • 錯誤不會被拒絕
  • 不支持超時
  • 中止Fetch
  • 沒有Progress
• XMLHttpRequest vs Fetch?

2019年是ajax誕生的20周年。可以說，XMLHttpRequest的第一次實現是在1999年作為IE5.0 ActiveX組件發布。

在此之前，曾經有一些方法可以在不刷新頁面的情況下從服務器獲取數據，但是他們通常依賴笨拙的技術，例如<script>注入或第三方插件。微軟開發了XMLHttpRequest初始版本, 用於替代Outlook基於瀏覽器的電子郵件客戶端。

XMLHttpRequest直到2006年才成為Web標准，但在此之前已在大多數瀏覽器中被實現。由於它在Gmail和Google Maps中的采用，Jesse James Garrett在2005年發表了一篇文章：AJAX: A New Approach to Web Applications.這個新術語吸引了開發人員的關注。

從AJAX到Ajax

AJAX是Asynchronous JavaScript and XML的簡稱。"Asynchronous"一詞很明顯，但是：

1. 雖然VBScript和Flash也可以實現，但是JavaScript更合適
2. 有效負載不必是XML，盡管在當時很流行。在今天，可以使用任何的數據格式，通常JSON是首選。

現在，我們將“Ajax”用作客戶端從服務器獲取數據並動態更新DOM,而無需刷新整個頁面的通用術語。Ajax是大多數Web應用程序和單頁應用程序（SPA）的核心技術。

XMLHttpRequest

以下JavaScript代碼展示了如何使用XMLHttpRequest(通常簡稱為XHR)向http://domain/service發出的HTTP GET請求。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain/service');

// request state change event
xhr.onreadystatechange = function() {
  // request completed?
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // request successful - show response
    console.log(xhr.responseText);
  } else {
    // request error
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// start request
xhr.send();

XMLHttpRequest對象有許多屬性、方法和事件。例如，可以設置和監測以毫秒為單位的超時：

// set timeout
xhr.timeout = 3000; // 3 seconds
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);

並且progress事件可以報告長時間運行的文件上傳：

// upload progress
xhr.upload.onprogress = p => {
  console.log( Math.round((p.loaded / p.total) * 100) + '%') ;
}

屬性的數量可能令人困惑，而且XMLHttpRequest的早期實現在跨瀏覽器之間也不一致。因此，很多庫和框架都提供了Ajax的封裝函數，例如jQuery.ajax()方法：

// jQuery Ajax
$.ajax('http://domain/service')
  .done(data => console.log(data))
  .fail((xhr, status) => console.log('error:', status));

Fetch

Fetch API是XMLHttpRequest的現代替代方案。通用的Header，Request和Response接口提供了一致性，同時Promises允許更簡單的的鏈式調用和不需要回調的async/await。

fetch(
    'http://domain/service',
    { method: 'GET' }
  )
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

Fetch簡潔，優雅，易於理解，並且在PWA Service Worker中大量使用。為什么不用它替代古老的XMLHttpRequest呢？

不幸的是，Web開發從未如此明確。Fetch還不是用於Ajax的完美替代品...

瀏覽器支持

Fetch API在大部分瀏覽器中得到了很好的支持，但是不支持所有版本的IE。使用2017年之前版本的Chrome，Firefox和Safari的人可能也會遇到問題。這些用戶或許只占你用戶群的一小部分……也有可能是主要客戶。所以編碼之前，請務必確認兼容性！

此外，與成熟的XHR對象相比，Fetch API較新，並且會接收更多正在進行的更新。這些更新不太可能破壞原始代碼，但預計未來幾年會進行一定的維護工作。

默認無Cookie

與XMLHttpRequest不同，Fetch並不會默認發送cookie，因此應用的身份驗證可能會失敗。可以通過更改第二個參數中傳遞的初始值來解決此問題，例如：

fetch(
  'http://domain/service',
  {
    method: 'GET',
    credentials: 'same-origin'
  }
)

錯誤不會被拒絕

令人驚訝的是，HTTP錯誤（例如404 Page Not Found 或 500 Internal Server Error）不會導致Fetch返回的Promise標記為reject；.catch()也不會被執行。想要精確的判斷 fetch是否成功，需要包含 promise resolved 的情況，此時再判斷 response.ok是不是為 true。如下：

fetch(
    'http://domain/service', 
    { method: 'GET' }
  )
  .then( response => {
    if(response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

僅當請求無法完成時才觸發reject，例如網絡故障或請求被阻止。這會使錯誤捕獲更加復雜。

不支持超時

Fetch不支持超時，只要瀏覽器允許，請求將繼續。解決方法是可以將Fetch包裝在一個Promise中，例如：

// fetch with a timeout
function fetchTimeout(url, init, timeout = 3000) {
  return new Promise((resolve, reject) => {
    fetch(url, init)
      .then(resolve)
      .catch(reject);
    setTimeout(reject, timeout);
  }
}

或使用Promise.race()決定fetch或timeout何時首先完成，例如：

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

中止Fetch

通過xhr.abort()很容易結束一個XHR請求，另外也可以通過xhr.onabort函數監測事件解決。

之前一直無法中止一個Fetch請求，但是現在實現了AbortController API的瀏覽器可以支持它。這將觸發一個信號，該信號可以傳遞給Fetch啟動對象：

const controller = new AbortController();

fetch(
  'http://domain/service',
  {
    method: 'GET'
    signal: controller.signal
  })
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('Error:', error) );

Fetch可以通過調用controller.abort()來中止。Promise被標記reject后，會調用.catch()函數。

沒有Progress

在撰寫本文時，Fetch仍不支持進度事件。因此，不可能顯示文件上傳或大型表單提交的進度狀態。

XMLHttpRequest vs Fetch?

最后，選擇還是看你自己……除非你的應用是要求有上傳進度條的IE客戶端。你也可以選擇將Fetch polyfill與Promise polyfill結合使用，以便在IE中執行Fetch代碼。

對於更簡單的Ajax調用，XMLHttpRequest是低級別的，更復雜的，並且你需要封裝函數。不幸的是，一旦你開始考慮超時，中止調用和錯誤捕獲的復雜性，Fetch也會如此。

Fetch的未來可期。但是，該API是相對較新，它不提供所有XHR的功能，並且某些參數設置比較繁瑣。因此在以后的使用過程中，請注意上述問題。