深入浅出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. }