对于前端请求fetch的详解

前言：

这里需要说明一下，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的基本请求已经完成

对于前端请求fetch的详解

推荐阅读更多精彩内容