深入淺出Fetch API 帶你入解應用場景及適用問題

Fetch API

Fetch API提供了一個fetch()方法，它被定義在BOM的window對象中，你可以用它來發起對遠程資源的請求。 該方法返回的是一個Promise對象，讓你能夠對請求的返回結果進行檢索。

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

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

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(); 

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

為了能夠和傳統的XMLHttpRequest進行對比，我們使用傳統的方法來編寫一個同樣功能的函數：
可以發現，主要的不同點在于：傳統上我們會使用事件處理器，而不是Promise對象。 并且請求的發起完全依賴于xhr對象所提供的方法。

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

為什么需要替代XMLHttpRequest

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

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

你可以通過Request構造器函數創建一個新的請求對象，這也是建議標準的一部分。 第一個參數是請求的URL，第二個參數是一個選項對象，用于配置請求。請求對象一旦創建了， 你便可以將所創建的對象傳遞給fetch()方法，用于替代默認的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. } 

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈