美文网首页
fetch了解

fetch了解

作者: 田野的海螺 | 来源:发表于2018-07-20 11:39 被阅读0次

XMLHttpRequest:

从XMLHttpRequest是一个Javascript对象,用于在后台与服务器交换数据。是原生js中的一种请求数据的一种方法,现在已经被W3C标准化收到所有的浏览器支持。

使用:当我们想要使用XMLHttpRequest发送一个请求时,通常这样来做:

首先创建一个 XMLHttpRequest 实例=>之后使用open方法初始化一个请求:=>定义回调函数,只要XMLHttpRequest.readyState 属性发生变化,就会触发readystatechange事件,同时有一个事件处理回调函数被执行=>最后发送请求,xmlhttp.open(“方式”,”地址”,”标志位”)

XMLHttpRequest请求

ajax

作为 jQuery封装 的 ajax 接口,使用方便,

ajax请求

fetch 

浏览器现在支持Fetch API,可以无须其他库就能实现Ajax,Fetch你想获取资源,Fetch会返回Promise,所以在获取资源后,可以使用.then方法做你想做的。

第一个参数是设置请求方法(如post、put或del),Fetch会自动设置方法为get。

第二个参数是设置头部。因为一般使用JSON数据格式,所以设置ContentType为application/json。

第三个参数是设置包含JSON内容的主体。因为JSON内容是必须的,所以当设置主体时会调用JSON.stringify。

实践中,post请求会像下面这样:

请求格式

获取异常,返回的promise

catch捕获错误信息

更有:Fetch是很好的方法,能发送和接收数据。不需要在编写XHR请求或依赖于jQuery。

尽管Fetch很好,但是其错误处理不是很直接。在处理之前,需要让错误信息进入到catch方法中。

使用zlFetch库,就不需要担心错误处理了,zlfetch库是可以安装的( npm install zl-fetch --save),zlFetch库就是上例中handleResponse函数,所以可以不用生成此函数,不需要担心响应来处理数据和错误,zlFetch还能无须转换成JSON格式就能发送JSON数据,下面两个函数做了同样事情,zlFetch加入Content-type然后将内容转换为JSON格式。zlFetch处理身份认证也很容易。常用方法是在头部加入Authorization,其值设为Bearer your-token-here。如果你需要增加token选项,zlFetch会帮你创建此域。(https://www.cnblogs.com/libin-1/p/6853677.html)

相关文章

网友评论

      本文标题:fetch了解

      本文链接:https://www.haomeiwen.com/subject/mhztmftx.html