JS面试题之ajax、axios、fetch的区别

Ajax

AsynchronousJavascriptAndXML

异步JavaScript和XML

它是一种创建交互式网页应用的网页开发技术。

它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页不使用ajax，如果需要更新内容，必须重载整个网页页面。其缺点如下：

1. 本身是针对MVC编程，不符合前端MVVM的浪潮。
2. 基于原生XHR开发，XHR本身的架构不清晰，不符合关注分离（Separation of Concerns）的原则。配置和调用方式非常混乱。而且基于事件的异步模型不友好。

Fetch

号称是ajax的替代品，是在es6出现的，使用了es6中的promise对象。

fetch是基于promise设计的。fetch的代码结构比起ajax简单多。

fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch的优点：

1. 语法简洁，更加语义化
2. 基于标准Promise实现，支持async/await，更加底层，提供的API丰富（request，response）
3. 脱离了XHR，是ES规范里新的实现方式

fetch的缺点：

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

Axios

Axios是一种基于Promise封装的HTTP客户端。其特点如下：

1. 浏览器端发起XMLHttpRequest请求
2. node端发起http请求，支持Promise API，监听请求和返回，对请求和返回进行转化
3. 取消请求
4. 自动转换json数据
5. 客户端支持抵御XSRF攻击

参考资料：JS面试题之ajax、axios、fetch的区别