Fetch API更加現代
XHR 和 Fetch API 最顯著的區別就是調用方式不同。這一點大家應該都知道吧。
舉個例子，下面兩端代碼完成的是同一功能：
// 用 XHR 發起一個GET請求 var xhr = new XHMHttpRequest(); xhr.open('GET', url); xhr.responseType = 'json'; xhr.onload = function(){ console.log(xhr.response); }; xhr.onerror = function(){ console.log('something wrong~ ╮(￣▽￣)╭'); }; xhr.send(); // 用 Fetch 完成同樣的請求 fetch(url).then(function(response){ return response.json(); }).then(function(jsonData){ console.log(jsonData); }).catch(function(){ console.log('something wrong~ ╮(￣▽￣)╭'); });
相比 XHR ，Fetch 結合了現代的編碼模式，使用起來更簡潔 ，完成工作所需的實際代碼量也更少。
Fetch API更底層
其實，剛才說到的 Fetch API 並不是指僅僅一個 fetch 方法，還包括 Request、 Response、Headers、Body都一系列原生對象。對於傳統的XHR而言，你必須使用它的一個實例來發出請求和處理響應。 但是通過Fetch API，我們還能夠通過剛才提到的原生對象，明確的配置請求和響應。這些底層的抽象讓 Fetch API 比 XHR 更靈活。
舉個例子，現在要下載一個很大的 utf-8 格式的 txt 文件，我們通過流式的響應體而不是文本的形式讀取，最后顯示在一個div中。(為什么使用流、使用流有什么好處我就不做過多解釋了……)
document.addEventListener('DOMContentLoaded', function(e){ var url = 'Test.txt'; var div = document.getElementById('content'); var progress = 0; var contentLength = 0; fetch(url).then(function(response){ // 通過響應頭獲取文件大小 contentLength = response.headers.get('Content-Length'); var pump = function(reader){ return reader.read().then(function(result){ // 如果流中的內容讀取完畢，result.done的值會變為true if (!result.done) { // 獲取流中的數據 var chunk = result.value; var text = ''; // 流中的數據是一串字節碼，需要做轉碼 for (var i = 3; i < chunk.byteLength; i++) { text += String.fromCharCode(chunk[i]); } // 添加到頁面的div中 div.innerHTML += text; // 還可以用流的長度顯示當前進度 progress += chunk.byteLength; console.log(((progress / contentLength) * 100) + '%'); // 開始讀取下一個流 return pump(reader); } }); } // 開始讀取流中的信息 return pump(response.body.getReader()); }) .catch(function(error){ console.log(error); }); });
在上面的例子中，我們不止使用了流來下載文件，還通過響應頭獲取了響應的具體信息，顯示了下載的進度。雖然使用XHR也能做到使用流來讀取文件，不過現在應該只有IE瀏覽器支持。但是 Fetch API 提供了訪問數據的實際字節的方法，而 XHR 的 responseText 只有文本形式，這意味着在某些場景下它的作用可能非常有限。
Fetch API更接近未來
當我們在談論 Fetch API 時，我們在談論的不止是這些已經勝過 XHR 的地方，更是在談論 Fetch API未來的可能性。比如未來基於 Fetch 和 Service Worker 的緩存和請求攔截技術。