深入淺出Fetch API 帶你入解應(yīng)用場(chǎng)景及適用問(wèn)題

Fetch API

Fetch API提供了一個(gè)fetch()方法，它被定義在BOM的window對(duì)象中，你可以用它來(lái)發(fā)起對(duì)遠(yuǎn)程資源的請(qǐng)求。 該方法返回的是一個(gè)Promise對(duì)象，讓你能夠?qū)φ?qǐng)求的返回結(jié)果進(jìn)行檢索。

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

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

1. /* 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(); 

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

為了能夠和傳統(tǒng)的XMLHttpRequest進(jìn)行對(duì)比，我們使用傳統(tǒng)的方法來(lái)編寫(xiě)一個(gè)同樣功能的函數(shù)：
可以發(fā)現(xiàn)，主要的不同點(diǎn)在于：傳統(tǒng)上我們會(huì)使用事件處理器，而不是Promise對(duì)象。 并且請(qǐng)求的發(fā)起完全依賴于xhr對(duì)象所提供的方法。

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

為什么需要替代XMLHttpRequest

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

對(duì)于傳統(tǒng)的XMLHttpRequest而言，你必須使用它的一個(gè)實(shí)例來(lái)執(zhí)行請(qǐng)求和檢索返回的響應(yīng)。 但是通過(guò)Fetch API，我們還能夠明確的配置請(qǐng)求對(duì)象。

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

1. function xhrDemo() { 
2.     var xhr = new XMLHttpRequest(); 
3.     xhr.onload = function() { 
4.         insertPhotos(JSON.parse(xhr.responseText)); 
5.     }; 
6.     xhr.open('GET', URL); 
7.     xhr.send(); 
8. } 

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)