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的弊端。