【譯】XMLHttpRequest和Fetch, 誰最適合AJAX？-有解無憂

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

從AJAX到Ajax

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

雖然VBScript和Flash也可以實作，但是JavaScript更合適
有效負載不必是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 =https://www.cnblogs.com/hanksyao/p/> 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的功能，并且某些引數設定比較繁瑣，因此在以后的使用程序中，請注意上述問題，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/160802.html

標籤：JavaScript

上一篇：javascript中constructor指向問題

下一篇：Node.js概述1

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

目錄