fetch和XHR的区别

fetch和XHR（XMLHttpRequest）分别是什么？fetch和XHR都是是获取远端数据的方式。fetch是原生js方法，没有使用XMLHttpRequest对象，使用fetch可以不用引用http的类库即可实现。提供了一种简单，合理的方式来跨网络异步获取资源。XMLHttpRequest（XHR）是一个构造函数，对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面

MOSIAW

15751人浏览 · 2021-09-19 12:35:37

MOSIAW · 2021-09-19 12:35:37 发布

fetch和XHR（XMLHttpRequest）分别是什么？

fetch和XHR都是是获取远端数据的方式。
fetch是原生js方法，没有使用XMLHttpRequest对象，使用fetch可以不用引用http的类库即可实现。提供了一种简单，合理的方式来跨网络异步获取资源。
XMLHttpRequest（XHR）是一个构造函数，对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL。即允许网页在不影响用户操作的情况下，更新页面的局部内容。可以用于获取任何类型的数据。

fetch的一些问题

1）fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2）fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4）fetch没有办法用原生监测异步请求，而XHR可以

fetch同构方便，使用isomorphic-fetch

.fetch 不管请求处理成功还是失败，都会触发promise的resolve状态回掉。这个和传统的ajax 框架是有点区别的。fetch只有当网络故障导致请求发送失败或者跨域的时候才会触发reject的逻辑。我们可以通过response 对象的ok是否是true来判断是否是真正的成功。

XHR 和 Fetch 的使用详解和区别总结_陆小森_红齐飘飘的博客-CSDN博客

fetch和XHR的区别

1、调用方式不同

用 XHR 发起一个GET请求

var xhr = new XHMHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function(){
    console.log(xhr.response);
};
xhr.onerror = function(){
    console.log('something wrong~ ╮(￣▽￣)╭');
};
xhr.send();

用 Fetch 完成同样的请求

fetch(url).then(function(response){
    return response.json();
}).then(function(jsonData){
    console.log(jsonData);
}).catch(function(){
    console.log('something wrong~ ╮(￣▽￣)╭');
});