【譯】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的功能，而且某些參數設置比較繁瑣。所以在之後的使用過程當中，請注意上述問題。