fetch初步了解

前言

对于ajax请求，我们不仅可以使用XMLHTTPrequest，还可以使用fetch

正文

promise

在使用ajax时，如果想要使得第二个ajax请求调用第一个ajax请求，就得使用在onreadystatechange中再次指定一个ajax请求，如果再想使用第三个，就得继续判断，这样越来越多，代码就会变得越来越复杂，这就被称为回调地狱

有什么方法可以解决这个问题呢？就是使用promise

promise在ES6(ECMAScript 6.0)中被统一规范,所以新版的浏览器基本都是支持promise写法的

一个标准的promise的写法是这样的

new Promise(function(resolve, reject) {

    if(true) { resolve() };

    if(false) { reject() };

})

promise中有三种状态，pending（等待中），resolve（已经完成，得到想要的结果），reject（已经得到，但不是想要的结果）

在promise中可以使用then方法，来处理对应的状态变化，来对应执行

，并且then的执行结果也会返回一个promise对象，所以可以进行多次then的使用

fetch

继续来看fetch

fetch('http://example.com/movies.json')

  .then(function(response) {

    return response.json();

  })

  .then(function(myJson) {

    console.log(myJson);

  });

一个正常的fetch的格式是这样的，以一个url为参数，返回一个promise的responese

但是这只是一个html响应，并不是json对象，所以使用json()将其转变为json对象

fetch还可以加上第二个参数init

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 。
redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。
referrer: 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。
referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
integrity: 包括请求的 subresource integrity 值（例如：sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

fetch请求默认是不加cookie的，除非设置credentials，credentials默认为omit,忽略的意思，也就是不带cookie;还有两个参数，same-origin，意思就是同源请求带cookie；include,表示无论跨域还是同源请求都会带cookie

返回的response

status —— 整数(默认值为200) 为response的状态码.
statusText —— 字符串(默认值为"OK"),该值与HTTP状态码消息对应.
ok —— 如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值
headers —— 包含此Response所关联的Headers 对象.
body —— 包含响应或请求的正文

body中常用的方法

arrayBuffer()

使用一个buffer数组来读取 Response流中的数据，并将bodyUsed状态改为已使用。
blob()

使用一个Blob对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。
formData()

使用一个 FormData 对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。
json()

使用一个 JSON 对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。
text()

使用一个USVString (文本) 对象来读取 Response流中的数据，并将bodyUsed状态改为已使用。

一个示例

var myImage = document.querySelector('img');

var myHeaders = new Headers();

myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',

               headers: myHeaders,

               mode: 'cors',

               cache: 'default' };

var myRequest = new Request('flowers.jpg');

fetch(myRequest,myInit).then(function(response) {

  ...

});

参考链接

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

https://www.jianshu.com/p/fe5f173276bd

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

https://www.jianshu.com/p/35123b048e5e