国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jscript > 深入浅出Fetch API 带你入解应用场景及适用问题

深入浅出Fetch API 带你入解应用场景及适用问题

来源:程序员人生   发布时间:2015-10-31 17:36:38 阅读次数:10305次

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


生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生