前端请求大比拼：Fetch、Axios、Ajax、XHR

Fetch、Axios和Ajax都是前端用于发送HTTP请求的工具，而XHR是Ajax技术的一种实现。

1. 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));

2. Axios: 是一个基于Promise的HTTP客户端，同样用于浏览器和node.js。

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3. 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);
  }
});

4. 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。