fetch api

fetch API是当下较新的前后端交互api在比较高版本的历览器得到了支持例如谷歌浏览器中。

fetch提供了 fetch/Request/Header等方法用于ajax请求

1:header:用于设置ajax请求的请求头。

var headers=new Headers({

    "Content-Type":"text/html"

......

})

同时也可以用append方法往headers中增加元素

2:Request方法用于设置

var request=new Request(URL,{

    配置信息

})

配置信息的种类

    1:headers

    2:Method

.....

3:fetch方法fetch的灵魂用于具体的请求

    fetch方法返回一个promise对象

fetch( request ).then(function(data){

    console.log(data.json)

})

Fetch API从提出到实现一直存在着争议,由于一直现存的历史原因(例如HTML5的拖拽API被认为太过稀疏平常,Web Components标准被指意义不大)。 因此重新设计一个新的API来替代久经沙场历练的XMLHttpRequest就变得阻力重重。

其中一种反对观点认为,Promises缺少了一些重要的XMLHttpRequest的使用场景。例如, 使用标准的ES6 Promise你无法收集进入信息或中断请求。而Fetch的狂热开发者更是试图提供Promise API的扩展用于取消一个Promise。 这个提议有点自挖墙角的意思,因为将这将让Promise变得不符合标准。但这个提议或许会导致未来出现一个可取消的Promise标准。 但另一方面,使用XMLHttpRequest你可以模拟进度(监听progress事件),也可以取消请求(使用abort()方法)。 但是,如果有必要你也可以使用Promise来包裹它。

另一种反对观点认为,Web平台需要的是更多底层的API,而不是高层的API。对此的回答恰恰是, Fetch API足够底层,因为当前的WHATWG标准定义了XMLHttpRequest.send()方法其实等同于fetch的Requset对象。 Fetch中的Response.body实现了getReader()方法用于渐增的读取原始字节流。 例如,如果照片列表过大而放不进内存的话,你可以使用下面的方法来处理:


Fetch API

目前Chrome 42+, Opera 29+, 和Firefox 39+都支持Fetch。微软也考虑在未来的版本中支持Fetch。 讽刺的是,当IE浏览器终于微响应实现了progress事件的时候,XMLHttpRequest也走到了尽头。 目前,如果你需要支持IE的话,你需要使用一个polyfill库。

总结

在本文中我们为你介绍了Fetch API的整体概况以及它所能解决的问题。在表层, 这个API看起来非常的简单,但它同时也与一些底层的API相关联,例如Streams, 这让客户端编程有点类似于系统编程。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 通过XMLHttpRequest(XHR)来执行异步请求,这个方式已经存在了很长一段时间。虽...
    Bruce_zhuan阅读 2,514评论 1 10
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,958评论 19 139
  • 写在前面 fetch同XMLHttpRequest非常类似,都是用来做网络请求。但是同复杂的XMLHttpRequ...
    LETSGOHEAT阅读 5,165评论 0 6
  • Fetch API 一个隐藏最深的秘密就是AJAX的实现底层的XMLHttpRequest,这个方法本来并不是造出...
    uncle_charlie阅读 1,415评论 0 5
  • fetch 是浏览器提供的一个新的 web API,它用来代替 Ajax(XMLHttpRequest),其提供了...
    唯泥Bernie阅读 8,616评论 0 6