前言:
这里需要说明一下,fetch执行之后会回调一个promise对象,所以如果没了解过promise用法的可以去了解一下
至于为什么要用fetch?试想一下一个场景,用传统xhr按顺序访问两个异步接口,如果第一个接口访问失败了,那第二个接口就不能在继续进行了,但用fetch就能处理这种情况了。
进入开发
首先第一步,按照官方文档的说法,我们需要先创建一个request对象作为fetch执行参数
const myRequest = new Request(url, init);
或者
const myRequest = new Request(requestJson);
其中url为请求地址,init为设置的相关属性,requestJson是request对象,两者参数相似
method - 使用的HTTP动词,GET, POST, PUT, DELETE, HEAD
url - 请求地址,URL of the request
headers - 关联的Header对象
referrer - referrer
mode - 请求的模式,主要用于跨域设置,cors, no-cors, same-origin
credentials - 是否发送Cookie omit, same-origin
redirect - 收到重定向请求之后的操作,follow, error, manual
integrity - 完整性校验
cache - 缓存模式(default, reload, no-cache)
这里注意一下,requestJson和init中有一个mode参数,可以设置请求模式,对于跨域请求(no-cors:仅用于请求文件的时候使用;cors:跨域需要前后端设置头部信息)等问题是一个比较简易的解决方式
关于response
在用到ServiceWorkers的时候我们可能需要新建一个response对象,但一般不需要创建
var response = new Response('...',{
ok:false,
status:404,
url:'/'
})
下面,我们来创建一个基本的fetch
const req=new Request('http://hd2.nfapp.southcn.com/wx/getShareSignInfo',{method:'get',cache:false,mode:"no-cors"});
fetch(req).then((response)=>{
console.log(response);
if(response.ok)return response.json();
}
).then((result)=>{
console.log(result);
}).catch((e)=>{
console.log(e);
});
这里我们能看到我们接收到的并不是后台接口回传的参数,而是一个包含有状态、请求类型和回传参数等的一个json;
上面是一个基本的请求,下面我们来看看如果需要发送参数post和get方法的区别
对于get方法
我们知道用get方法传参的话需要封在url头部,因为get方法并没有body作为载体去传输数据的,而对于fetch的使用如下:
首先创建一个供我们发送的参数
let sendData=new URLSearchParams();//创建url格式参数
在参数中插入key,val
sendData.append("name",123);
然后我们需要在我们的请求参数的url加上参数
const req=new Request('url?'+sendData,{method:'get',cache:false,mode:"no-cors"});
对于post方法
post和get传参是不一样的,用post方式传参的话需要把参数加在body上,创建发送参数的方法也有所不同,但大同小异,直接上代码:
let sendData=new formData();//创建数据格式参数
sendData.append("name",123);
const req=new Request('url',{method:'get',cache:false,mode:"no-cors",body:sendData});
至此,fetch的基本请求已经完成