携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 20 天，点击查看活动详情
前因
在日常的工作中或者面试中，我们经常都需要与后端做数据的交互，在web1.0的时代，前端与后端的交互还是通过form来完成的，但是使用form的体验极差，试想一下，当我们给用户提供一个注册的表单，用户只有在点击提交的时候才能检验账号是否已经存在，一旦用户的账号存在了，页面就会刷新，导致用户之前填入的数据就都没了，那用户是不是会很崩溃。因此我们需要用ajax技术来实现无刷新数据提交。
AJAX
在web2.0中，AJAX的全称是Asynchronous JavaScript And XML，意思是异步的JavaScript和XML。简单来说就是使用XMLHttpRequest对象与服务器进行通信。它最大的特点就是“异步”，也就是说它可以在不重新刷新页面的情况下与服务器进行通信，以此来达到页面的更新。
AJAX的核心其实是就是XMLHttpRequest，通过XMLHttpRequest这个API，我们创建一个request对象，然后设置请求的方式为GET或者POST，并且通过监听onreadystatechange来检测状态的变化，最终完成数据的交互。
fetch
fetch在当前最新的浏览器中是window上自带的一个方法，它本身和AJAX还是有很大的区别的。首先fetch是基于promise设计的low-level API，它不是ajax的升级，而是原生的javascript，因此它使用起来会比原生的ajax简单很多，不管是从设计上或者是使用体验来说，fetch都比ajax要强很多。但是fecth也有它自身的一些缺点。
我们都知道ajax是基于XMLHttpRequest来实现的，并且ajax是可以通过参数来设置同步或异步来执行代码，但是fetch只支持异步，不支持同步，并且fetch的请求错误只针对网络请求报错，它不会区分400或500这些状态码为错误状态，需要自己去封装一层来做判断。
其次，当我们需要将cookie中的数据传递给后端时，fetch也是默认不会带上的，需要我们添加相应的配置项才行，并且fetch没有办法监听请求的进度。而我们在使用ajax时，它本身是通过onreadystatechange来监听状态的改变，因此ajax是可以通过XHR来实现状态的监听的。
axios
axios本身也是基于原生XHR实现的一层封装，本质上还是ajax，不过它是通过promise的形式来实现的，因此使用起来会比原生的ajax简单方便很多。并且axios还在nodejs层实现了HTTP的请求，符合最新的es规范。
axios有以下几个特点。首先它是基于XMLHttpRequest来创建的，其次通过Promise的API实现了一层封住，并且在客户端支持防止CSRF(跨站伪造攻击)，还支持拦截请求和响应，以及取消请求，自动转化JSON数据等功能，相比原生的ajax来说，拥有更多的API和更加强大的功能，但是本质还是脱不开XHR的。
对比
上面我们分别介绍了AJAX、fetch和axios，那它们之间有什么区别呢？
- 它们三者本质上都是用于网络请求的工具，只是它们的维度不同。
ajax是在web2.0中出现的一种异步数据交互的方式，而fetch是一个浏览器支持的原生API。axios则是一个基于XHR实现是三方库。 XHR和fetch都是原生是API，而axios是基于原生API做了相关的封装而实现的库。
最后
我们通过对比了XHR和fetch来讲解原生ajax，通过学习axios来使用ajax。在实际的开发中，我们只需要知道它们之间的区别即可，但是在开发过程中还是尽量使用现在的请求库，不要自己重复造轮子。在学习的过程中，我们可以通过自己造轮子来了解底层的原理，但是实际开发用现成的就好。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
