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

分手后的思念是犯贱 2023-10-09 17:43 14阅读 0赞

## 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的区别][JS_ajax_axios_fetch]

[JS_ajax_axios_fetch]: https://www.bilibili.com/video/BV1tt4y1c7Vf/?spm_id_from=333.337.search-card.all.click&vd_source=a1af903e57688df870625021f7f3a7eb