前言：
这里需要说明一下，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的基本请求已经完成
网友评论