fetch学习（二）--提高篇

1、什么是fetch，我们看下面的官方定义：

Promise<Response> fetch(input[, init]);

表明：fetch的返回值是一个Promise对象，Promise对象在请求成功的时候会resolve一个值，让我们在它的then方法中得到。Promise在对象在请求失败的时候会reject一个错误，在catch中得到处理。
fetch有两个参数，input代表必选参数，一般是一个url或者是一个Request对象。第二个参数init是可选的，会配置一些其他需要的信息。

2、关于fetch的第二个参数有哪些配置项？
（常用的三个就是method，headers，body）

method: 请求使用的方法，如 GET、POST。

headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。

body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

mode: 请求的模式，如 cors、 no-cors 或者 same-origin。

credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。

cache: 请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。

3、关于fetch的数据流解析。
上一篇我们使用了blob()进行图片读取，使用json()进行数据读取。那它还有什么解析方式呢？

主要有五种这样的解析方式：
arrayBuffer()
使用一个buffer数组来读取数据流。
blob()
使用一个Blob对象来读取数据流。
Body.formData()
使用一个 FormData 对象来读取 Response流中的数据。
Body.json()
使用一个 JSON 对象来读取 Response流中的数据。
Body.text()
使用一个USVString (文本) 对象来读取 Response流中的数据。

还是使用之前的示例：

let myRequest = new Request('http://datainfo.duapp.com/shopdata/getclass.php');let headers = new Headers()fetch(myRequest,{    method: 'GET',    headers: headers,    body: {}}).then((response) => {    console.log(response)    return response.json();}).then((responseJson) => {    console.log(responseJson);});

这里的response.json()返回的是一个Promise对象，所以会吧读取的数据在下一个then方法中读取到。

4、关于fetch的header头部信息的处理。
一般而言，我们使用header的时候会先new一个Headers对象。

let myHeader = new Headers();
在一些请求中会对header有一些其他的要求，这时可以通过append()方法来添加。
代码示例：

var myHeaders = new Headers();myHeaders.append('Content-Type', 'text/xml');myHeaders.get('Content-Type') // should return 'text/xml'

Header的本质是一个对象，所以很多对象的方法我们可以用来操作Header。