Axios、Ajax、jQuery Ajax、Fetch 都是 JavaScript 中用来发送数据请求的工具，但它们之间存在以下区别：
一：Axios：
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中使用。
特点：
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 CSRF
传和下载进度等
以下是使用 Axios 发送 GET 请求的基本用法：
1.安装 Axios
npm install axios
2.引入 Axios
import axios from 'axios'
3.发送 GET 请求
axios.get('/api/user')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
在上面的代码中，我们通过 axios.get() 方法发送了一个 GET 请求，并且指定了请求的 URL。请求成功时，我们通过 response.data 获取到了响应数据。如果请求失败，我们可以通过 catch() 捕捉到错误，并进行相应的处理。
除了 GET 请求，Axios 还支持发送 POST、PUT、DELETE 等请求，方法名与 GET 不同，具体用法类似。
Axios 还支持设置请求头、请求参数、请求拦截器、响应拦截器等特性，可以通过官方文档了解更多用法。
二：Ajax：
Ajax 是一种使用 XMLHttpRequest 对象与服务器进行数据交换的技术，它可以实现异步加载数据，不会阻塞页面的其它操作。但使用 Ajax 时需要手动处理一些错误，如请求超时、网络错误等。
原生的 Ajax 用法相对 jQuery 略显复杂，需要手动处理 XMLHTTPRequest 对象的各种属性和方法，以下是一个基本的 GET 请求：
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 设置请求地址
xhr.open('GET', '/api/user');
// 监听状态改变事件
xhr.onreadystatechange = function() {
// 如果请求已完成
if (xhr.readyState === 4) {
// 如果请求成功
if (xhr.status === 200) {
// 获取响应数据并进行处理
console.log(xhr.responseText);
} else {
// 请求失败，输出错误信息
console.log(xhr.status + ' ' + xhr.statusText);
}
}
};
// 发送请求
xhr.send();
在上面的代码中，我们首先创建了一个 XMLHttpRequest 对象，然后调用 open() 方法设置请求地址。接着，我们监听了 onreadystatechange 事件，该事件会在 XMLHttpRequest 对象的 readyState 属性改变时被触发。当 readyState 等于 4 时，说明请求已完成，此时可以根据 status 属性判断请求是否成功，如果成功，可以通过 responseText 属性获取响应数据。最后，调用 send() 方法发送请求。
除了 GET 请求，原生 Ajax 还支持发送 POST、PUT、DELETE 等请求，具体用法与 jQuery 类似。原生 Ajax 也支持设置请求头、请求参数、请求类型、超时时间等特性，需要手动设置相应的属性。
三：jQuery Ajax
jQuery Ajax 是基于 Ajax 的封装，使用简单便捷，但是需要在代码中引入 jQuery 库。
以下是使用 jQuery 发送 GET 请求的基本用法：
1.引入 jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2.发送 GET 请求
$.ajax({
url: '/api/user',
type: 'GET',
success: function(response) {
console.log(response)
},
error: function(xhr, status, error) {
console.log(error)
}
})
在上面的代码中，我们使用 $.ajax() 方法发送了一个 GET 请求，并且指定了请求的 URL。请求成功时，我们通过 success 回调获取到了响应数据。如果请求失败，我们可以通过 error 回调捕捉到错误，并进行相应的处理。
除了 GET 请求，Ajax 还支持发送 POST、PUT、DELETE 等请求，方法名与 GET 不同，具体用法类似。
Ajax 还支持设置请求头、请求参数、请求类型、超时时间等特性，可以通过 jQuery 官方文档了解更多用法。
四：Fetch
Fetch 是 ES6 中新增的 API，基于 Promise 对象实现，可以替代 XMLHttpRequest 对象。Fetch 具有更强大的功能和更简洁的语法。但是，Fetch 在处理错误时比较麻烦，需要手动处理一些错误。
以下是一个基本的 GET 请求：
fetch('/api/user')
.then(response => {
// 如果请求成功
if (response.ok) {
// 获取响应数据并进行处理
return response.json().then(data => console.log(data));
} else {
// 请求失败，输出错误信息
console.log('网络请求失败');
}
})
.catch(error => {
// 请求过程中出现异常
console.error(error);
});
在上面的代码中，我们调用 fetch() 方法发送请求，并返回一个 Promise 对象。在 Promise 对象的回调函数中，我们可以根据响应的 status 属性判断请求是否成功，如果成功，可以调用 response.json() 方法获取响应数据并进行处理。在 Promise 对象的 catch() 方法中，我们可以处理请求过程中出现的异常。
除了 GET 请求，Fetch API 还支持发送 POST、PUT、DELETE 等请求，具体用法与 jQuery 类似。Fetch API 也支持设置请求头、请求参数、请求类型、超时时间等特性，需要手动设置相应的参数。需要注意的是，由于 Fetch API 是基于 Promise 的，因此在处理跨域请求时需要使用 CORS 协议，否则会出现跨域请求被浏览器拒绝的情况。
五：Ajax，jQuery ajax，axios和fetch的区别：
Ajax：
ajax自然不必说，最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
Jquery Ajax：
是jQuery框架中的发送后端请求技术，由于jQuery是基于原始的基础上做的封装，所以，jquery Ajax自然也是原始ajax的封装
Fetch：
fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。
axios：
axios不是原生JS的，需要进行安装，它不带可以在客户端使用，也可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于promise对象的。具体参照axios的概念
总结：Axios 在功能上比 Ajax 和 jQuery Ajax 更强大，而 Fetch 则是一个较新、更先进的 API，但它也存在一些问题。选择适合自己需求的工具，可以提高代码编写效率和减少出错风险。
