【譯】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的功能,並且某些引數設定比較繁瑣。因此在以後的使用過程中,請注意上述問題