Fetch请求

为何要用Fetch请求？

XMLHttpRequest是一个设计粗糙的API，不符合关注分离的原则，尽管开发者只关心请求成功后的业务处理，可是也要配置其余繁琐内容，致使配置和调用方式很是混乱，并且基于事件的异步模型写起来也没有现代的Promise、async/await好。

 

Fetch()方法用于发起获取资源的请求，他返回一个promise，这个promise会在请求响应后被resolve，并传回Response对象。

使用XHR发送一个json请求通常是这样：

var url="fetch.json";
var xhr=new XMLHttpRequest();
xhr.open('GET',url,true);
xhr.responseType='json';
xhr.send();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
        console.log(xhr.response);
    }
}

使用Fetch请求后，顿时简单明了

fetch(url，{
　　携带的参数
}).then(response=>response.json())
.then(data=>{
    console.log(data);
})

fetch()请求返回的response是Stream对象，所以须要调用response.json()是因为异步读取流对象，因此返回的是一个Promise对象。

 

Fetch请求的优势：

（1）语法简单，更加语义化；

（2）基于Promise实现，支持async/await

 

Fetch请求常见坑：

（1）Fetch请求默认是不带Cookie的，须要fetch(url,{credentials:'include'})

（2）服务器返回400、500错误码时并不会reject，只有网络错误这些致使请求不能完成时，fetch才会被reject。

（3）兼容性问题