fetch和XHR的区别

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~ ╮(￣▽￣)╭');
});

fetch和XHR请求有关的特性

https://segmentfault.com/a/1190000010417624

二者的缺点

1、fetch有兼容问题

两者的未来

Fetch API未来基于 Fetch 和 Service Worker 的缓存和请求拦截技术。

fetch与XHR的区别与优势 - 左耳的风铃lal - 博客园

fetch和XHR的区别相关推荐

fetch与XHR的区别与优势
Fetch API更加现代 XHR 和 Fetch API 最显著的区别就是调用方式不同.这一点大家应该都知道吧. 举个例子,下面两端代码完成的是同一功能: // 用 XHR 发起一个GET请求 va ...
fetch 不是xhr_fetch与XHR的区别与优势
Fetch API更加现代 XHR 和 Fetch API 最显著的区别就是调用方式不同.这一点大家应该都知道吧. 举个例子,下面两端代码完成的是同一功能: // 用 XHR 发起一个GET请求 va ...
fetch和ajax的区别？
一.写在前面今天总结一下fetch和ajax的区别. 二.Ajax ajax的本质就是使用XMLHttpRequest对象来请求数据,下面是简单的原生js实现. function ajax(url, ...
ajax与axios使用哪个好,ajax、axios、fetch之间的详细区别以及优缺点
将jQuery的ajax.axios和fetch作个简单的比较,所谓仁者见仁智者见智,最终使用哪一个仍是自行斟酌javascript 1.jQuery ajax 前端 $.ajax({ type: ' ...
#39;git pull#39;和#39;git fetch#39;有什么区别？
主持人注意:鉴于此问题已经发布了67个答案 (其中一些已删除),请在发布另一个问题之前考虑您是否正在贡献新内容 . git pull和git fetch什么区别? #1楼我花了一点时间来了解有什么区 ...
JAVA面试要点002_Git中fetch和pull的区别
原文: http://www.tech126.com/git-fetch-pull/ Git中从远程的分支获取最新的版本到本地有这样2个命令: 1. git fetch:相当于是从远程获取最新版本到本 ...
Git指令中fetch和pull的区别fetch和pull的区别
https://www.cnblogs.com/sxy370921/p/11734628.html
fetch 不是xhr_春招｜前端2019应届春招：不是被大厂选，而是选大厂（字节跳动，美团，网易）...
作者:Thescavenger 链接:https://www.nowcoder.com/discuss/163165 来源:牛客网你需要的前端面经个人情况本科,成都双非大学,大三开始正式学习前端 ...
【react】 react 中前后端数据的交互方式（原生的ajax、jq的ajax、axios、fetch ）...
这是fetch 请求数据的方式 ---fetch---基本使用一.fetch fetch是一种XMLHttpRequest的一种替代方案,在工作当中除了用ajax获取后台数据外我们还可以使用fet ...

fetch和XHR的区别

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

fetch和XHR的区别

1、调用方式不同

fetch和XHR请求有关的特性

二者的缺点

两者的未来

fetch和XHR的区别相关推荐

最新文章

热门文章