Fetch、Axios和Ajax都是前端用于发送HTTP请求的工具，而XHR是Ajax技术的一种实现。
- Fetch: 是一个现代的、强大的、灵活的、以Promise为基础的网络请求API。
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));
- Axios: 是一个基于Promise的HTTP客户端，同样用于浏览器和node.js。
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
- Ajax: 即“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网络开发技术。
$.ajax({
url: 'https://api.example.com/data',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.error('Error:', error);
}
});
- XHR: 即“XMLHttpRequest”，是Ajax技术的核心部分，可以通过编程方式向服务器发送请求并处理响应。
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
Fetch、Axios和Ajax都是现代的、灵活的请求方式，而XHR是较旧的技术。Fetch和Axios都是基于Promise的，使得异步处理更加简洁；而XHR则是基于回调函数。
在选择时，可以根据项目需求和团队成员的技术背景来决定。如果项目中已经在使用jQuery或其他Promise库，可能会倾向于Axios或原生Fetch。如果项目需要更低级别的控制，或者需要兼容不支持Promise的旧浏览器，可能会选择XHR或Ajax。