Fetch

一直在用ajax,在到后来的axios,都是使用XMLHttpRequest去进行整体操作,整体过程也是那几步.而Fetch是一套基于Promise设计出来用来处理异步请求的新的API,现在已经在很多的框架中使用.

1.基本使用

基本使用非常简单,使用Promise的链式写法,就能完成整个请求过程

fetch("fetch.php").then((response) => {
    console.log(response);
    return response.json();
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err);
})

整个请求过程分成两个部分,第一部分根据对应的request进行请求,默认是get,如果请求正确,会返回一个response,包含了请求的一些信息,状态等,然后会返回一个返回一个新的Promise对象,在第二个then中获取对应的json,catch还是捕获异常

2.Headers

这个主要是设置请求头,都是对请求头添加字段,都是对请求头进行操作,增删改遍历等

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/xml');
myHeaders.append('Accept-Encoding', 'deflate');
myHeaders.append('Content-Type', 'image/gif');
console.log(myHeaders.get('Content-Type'));
console.log(myHeaders)
for (var item of myHeaders.entries()){
    console.log(item);
}

append添加键值对,但是直接打印Headers对象是没有办法看见添加的键值对内容的,只能通过get(),getAll(),entries()(迭代器)去找到对应键值对内容,set()就是修改,append()如果添加一个已经存在的键值对,会继续添加,不会覆盖掉已有的,以一个数组的形式保存,Headers提供的方法还有values(),delete()等,都是对键值对操作的方法,原型上还有forEach()

3.Request

设置完头部,需要同请求一同发送给服务器,就需要设置request.Request的构造函数需要两个参数,第一个参数可以是一个请求的URL,第二个参数可选的,请求的一写参数都可以进行设置
1.method:请求方式,GET,POST,默认是GET
2.headers:请求头,可以是Headers对象,也可以是json对象
3.cache:设置缓存方式,有几个值,默认是default,如果内容没变就从缓存里读取,如果有变化,请求,并且更新缓存.reload:是不查看缓存,直接请求.no-store:直接请求,并且不更新缓存.
4.mode:设置请求的模式,默认是cors,还能设置same-origin或者navigate
5.body:post请求设置的body体

var requestInit = {
    headers: myHeaders,
    cache: 'no-cache',
    method: 'POST',
    body: 'test=123&name=Tony'
}
var request = new Request("fetch.php", requestInit);

4.Response

在第一个then里打印请求返回回来的response对象

response对象

里面有很多参数,比如状态码,url等基本状态参数,但是没有办法获取到请求回来的数据,如果是json的话,可以使用response.json(),这个函数会返回一个新的promise,才能促成链式写法,除了json(),还有blob(),可以获取图片等.
到了第二步的then,使用上一步返回的promise对象,获取到前一步的结果,这个结果直接就是一个json对象,对数据的处理就可以进行了,如果整个过程报错,会在catch捕获
fetch整个过程简单,方便,只要是明白promise就能知道对应流程