Fetch请求

Posted 2022-06-01 xiaoan0705

为什么要用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）兼容性问题