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://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
