ajax fetch axios的区别

了解ajax,fetch、axios。

ajax,基于jquery,对原生XHR的封装,还支持JSONP,非常方便。

优点:无需要通过刷新页面更新数据,支持异步与服务器通信,而且规范被广泛支持。

那么淘汰ajax的根本原因是什么呢?

因为引入的单页面框架,

如vue的mvvn架构,或者是只有m的react,他们都属于js驱动Html。这涉及到控制dom刷新的过程。es5可以利用callback, 或者generater的迭代器模式进行处理。但是还不理想。所以es6引入了promise的概念。

所以,以返回promise的单位的异步控制进程逐步发展。

一方面,ajax没有改进,他依然我行我素的不支持promise。这对“新”前端的理念很不符,我们无法用ajax来完成异步操作(除非回调地狱,写过大项目的都知道定位问题太难了)。

另一方面,他还需要引入jquery来实现。我们都知道新框架,都基本脱离了jq。

fetch就这样产生了。解决了ajax无法返回promise的问题。开始让人抛弃ajax。

fetch号称是ajax的替代品,它的API是基于Promise设计的,旧版本的浏览器不支持Promise,需要使用polyfill es6-promise

然而,fetch貌似是为解决返回Promise而产生的,并没有注意其他网络请求工具该做的细节,他虽然支持promise, 但暴露了太多的问题:

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可以

因此,axios正式入场。他重新基于xhr封装,支持返回Promise, 也解决了fetch的弊端。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值