多年來，XMLHttpRequest一直是web開發(fā)者的親密助手。無論是直接的，還是間接的， 當我們談及Ajax技術(shù)的時候，通常意思就是基于XMLHttpRequest的Ajax，它是一種能夠有效改進頁面通信的技術(shù)。 Ajax的興起是由于Google的Gmail所帶動的，隨后被廣泛的應用到眾多的Web產(chǎn)品（應用）中，可以認為， 開發(fā)者已經(jīng)默認將XMLHttpRequest作為了當前Web應用與遠程資源進行通信的基礎(chǔ)。 而本文將要介紹的內(nèi)容則是XMLHttpRequest的最新替代技術(shù)——Fetch API， 它是W3C的正式標準，本文將會介紹Fetch API的相關(guān)知識，以及探討它所能使用的場景和能解決的問題。

Statement

原文地址： http://www.sitepoint.com/introduction-to-the-fetch-api/

譯者：景莊，前端開發(fā)工程師，主要關(guān)注于前端工程化技術(shù)、Node.js、React等。

Fetch API

Fetch API提供了一個fetch()方法，它被定義在BOM的window對象中，你可以用它來發(fā)起對遠程資源的請求。 該方法返回的是一個Promise對象，讓你能夠?qū)φ埱蟮姆祷亟Y(jié)果進行檢索。

為了能夠進一步的解釋Fetch API，下面我們寫一些代碼來具體的介紹它的用法： 下面這個例子將會通過Flicker API來檢索一些圖片，并將結(jié)果插入到頁面中。到目前為止， Fetch API還未被所有的瀏覽器支持。因此，如果你想體驗這一技術(shù)，最好使用最新版本的Chrome瀏覽器。 為了能夠正確的調(diào)用Flicker API，你需要申請自己的API KEY，將其插入到代碼中的適當位置，即your_api_key那個位置。

來看看第一個任務：我們使用API來從Flicker中檢索一些有關(guān)”企鵝“的照片，并將它們展示在也沒中，代碼如下。

/* API URL, you need to supply your API key */ var URL = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=your_api_key&format=json&nojsoncallback=1&tags=penguins';function fetchDemo() {fetch(URL).then(function(response) {return response.json();}).then(function(json) {insertPhotos(json);}); }fetchDemo();

上面的代碼看起來很簡單：首先是構(gòu)造請求的URL，然后將URL傳遞給全局的fetch()方法，它會立刻返回一個Promise， 當Promise被通過，它會返回一個Response對象，通過該對象的json()方法可以將結(jié)果作為JSON對象返回。?response.json()同樣會返回一個Promise對象，因此在我們的例子中可以繼續(xù)鏈接一個then()方法。

為了能夠和傳統(tǒng)的XMLHttpRequest進行對比，我們使用傳統(tǒng)的方法來編寫一個同樣功能的函數(shù)：

function xhrDemo() {var xhr = new XMLHttpRequest();xhr.onload = function() {insertPhotos(JSON.parse(xhr.responseText));};xhr.open('GET', URL);xhr.send(); }

可以發(fā)現(xiàn)，主要的不同點在于：傳統(tǒng)上我們會使用事件處理器，而不是Promise對象。 并且請求的發(fā)起完全依賴于xhr對象所提供的方法。

到目前為止，相比傳統(tǒng)的XMLHttpRequest對象，我們使用Fetch API獲得了更簡潔的編碼體驗。但Fetch API不止于此， 下面我們進一步的深入下去。

為什么需要替代XMLHttpRequest

看了前面的例子，你可能會問，為什么不直接使用那些現(xiàn)有的XMLHttpRequest包裝器呢？ 原因在于Fetch API不僅僅為你提供了一個fetch()方法。

對于傳統(tǒng)的XMLHttpRequest而言，你必須使用它的一個實例來執(zhí)行請求和檢索返回的響應。 但是通過Fetch API，我們還能夠明確的配置請求對象。

你可以通過Request構(gòu)造器函數(shù)創(chuàng)建一個新的請求對象，這也是建議標準的一部分。 第一個參數(shù)是請求的URL，第二個參數(shù)是一個選項對象，用于配置請求。請求對象一旦創(chuàng)建了， 你便可以將所創(chuàng)建的對象傳遞給fetch()方法，用于替代默認的URL字符串。示例代碼如下：

var req = new Request(URL, {method: 'GET', cache: 'reload'}); fetch(req).then(function(response) {return response.json(); }).then(function(json) {insertPhotos(json); });

上面的代碼中我們指明了請求使用的方法為GET，并且指定不緩存響應的結(jié)果。

有關(guān)Request對象的另一件更酷的事在于，你還可以基于原有的對象創(chuàng)建一個新的對象。 新的請求和舊的并沒有什么不同，但你可以通過稍微調(diào)整配置對象，將其用于不同的場景。 例如，你可以基于原有的GET請求創(chuàng)建一個POST請求，它們具有相同的請求源。代碼如下：

// 基于req對象創(chuàng)建新的postReq對象 var postReq = new Request(req, {method: 'POST'});

每個Request對象都有一個header屬性，在Fetch API中它對應了一個Headers對象。 通過Headers對象，你能夠修改請求頭。不僅如此，對于返回的響應，你還能輕松的返回響應頭中的各個屬性。 但是需要注意的是，響應頭是只讀的。

var headers = new Headers(); headers.append('Accept', 'application/json'); var request = new Request(URL, {headers: headers});fetch(request).then(function(response) {console.log(response.headers); });

在上面的代碼中，你可以通過Headers構(gòu)造器來獲取這個對象，用于為新的Request對象配置請求頭。

相似的，你可以創(chuàng)建一個Response對象：

function responseDemo() {var headers = new Headers({'Content-Type': 'application/json','Cache-Control': 'max-age=3600'});var response = new Response(JSON.stringify({photos: {photo: []}}),{status: 200, headers: headers});response.json().then(function(json) {insertPhotos(json);}); }

Request和Response都完全遵循HTTP標準。如果你曾經(jīng)使用過某種服務器端語言，你應該對它們很熟悉。 但是對于瀏覽器而言創(chuàng)建HTTP響應的要點是什么？總之，你不能將它發(fā)送給其他人。但是， 你可以通過Service Worker API將響應發(fā)送給你自己。 Service Worker允許通過截取來自瀏覽器的請求頭和提供本地構(gòu)造的響應頭來替換來自服務器的響應頭的方式來構(gòu)建離線應用。 你需要注意的是，在本文寫作的時候Service Worker仍然是實驗性的，并且仍處在不斷變化之中。

Fetch API面臨的阻力

Fetch API從提出到實現(xiàn)一直存在著爭議，由于一直現(xiàn)存的歷史原因（例如HTML5的拖拽API被認為太過稀疏平常，Web Components標準被指意義不大）。 因此重新設(shè)計一個新的API來替代久經(jīng)沙場歷練的XMLHttpRequest就變得阻力重重。

其中一種反對觀點認為，Promises缺少了一些重要的XMLHttpRequest的使用場景。例如， 使用標準的ES6 Promise你無法收集進入信息或中斷請求。而Fetch的狂熱開發(fā)者更是試圖提供Promise API的擴展用于取消一個Promise。 這個提議有點自挖墻角的意思，因為將這將讓Promise變得不符合標準。但這個提議或許會導致未來出現(xiàn)一個可取消的Promise標準。 但另一方面，使用XMLHttpRequest你可以模擬進度（監(jiān)聽progress事件），也可以取消請求（使用abort()方法）。 但是，如果有必要你也可以使用Promise來包裹它。

另一種反對觀點認為，Web平臺需要的是更多底層的API，而不是高層的API。對此的回答恰恰是， Fetch API足夠底層，因為當前的WHATWG標準定義了XMLHttpRequest.send()方法其實等同于fetch的Requset對象。 Fetch中的Response.body實現(xiàn)了getReader()方法用于漸增的讀取原始字節(jié)流。 例如，如果照片列表過大而放不進內(nèi)存的話，你可以使用下面的方法來處理：

function streamingDemo() {var req = new Request(URL, {method: 'GET', cache: 'reload'});fetch(req).then(function(response) {var reader = response.body.getReader();return reader.read();}).then(function(result, done) {if (!done) {// do something with each chunk}}); }

在上面的代碼中處理器函數(shù)一塊一塊的接收響應體，而不是一次性的。當數(shù)據(jù)全部被讀完后會將done標記設(shè)置為true。 在這種方式下，每次你只需要處理一個chunk，而不是一次性的處理整個響應體。

不幸的是，對于Stream API而言，這仍然還處于早期階段，這種方式下，如果你需要解析JSON， 你仍然需要從頭實現(xiàn)很多的工作。

瀏覽器支持

Fetch API

目前Chrome 42+, Opera 29+, 和Firefox 39+都支持Fetch。微軟也考慮在未來的版本中支持Fetch。 諷刺的是，當IE瀏覽器終于微響應實現(xiàn)了progress事件的時候，XMLHttpRequest也走到了盡頭。 目前，如果你需要支持IE的話，你需要使用一個polyfill庫。

轉(zhuǎn)自：http://www.open-open.com/lib/view/open1452486942714.html

總結(jié)

以上是生活随笔為你收集整理的深入浅出Fetch API的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。