【譯】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"一詞很明顯，但是：
- 雖然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 => 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的功能，並且某些引數設定比較繁瑣。因此在以後的使用過程中，請注意上述問題