JS面试题之ajax、axios、fetch的区别
Ajax
AsynchronousJavascriptAndXML
异步JavaScript和XML
它是一种创建交互式网页应用的网页开发技术。
它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页不使用ajax，如果需要更新内容，必须重载整个网页页面。其缺点如下：
- 本身是针对MVC编程，不符合前端MVVM的浪潮。
- 基于原生XHR开发，XHR本身的架构不清晰，不符合关注分离（Separation of Concerns）的原则。配置和调用方式非常混乱。而且基于事件的异步模型不友好。
Fetch
号称是ajax的替代品，是在es6出现的，使用了es6中的promise对象。
fetch是基于promise设计的。fetch的代码结构比起ajax简单多。
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch的优点：
- 语法简洁，更加语义化
- 基于标准Promise实现，支持async/await，更加底层，提供的API丰富（request，response）
- 脱离了XHR，是ES规范里新的实现方式
fetch的缺点：
- fetch只对网络请求报错，对400，500都当做成功的请求。服务器返回400，500错误码时并不会reject，只有网络错误这些导致请求不能完成时，fetch才会被reject
- fetch默认不会带cookie，需要添加配置项：fetch(url, {credentials:‘indude’})
- fetch不支持abort，不支持超时控制，使用setTimeout及Promise
- reject实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
- fetch没有办法原生监测请求的进度，而XHR可以
Axios
Axios是一种基于Promise封装的HTTP客户端。其特点如下：
- 浏览器端发起XMLHttpRequest请求
- node端发起http请求，支持Promise API，监听请求和返回，对请求和返回进行转化
- 取消请求
- 自动转换json数据
- 客户端支持抵御XSRF攻击
参考资料：JS面试题之ajax、axios、fetch的区别