ajax/axios/fetch 的区别是什么？

Ajax (Asynchronous JavaScript and XML)、Axios 和 Fetch API 是前端开发中用于与服务器进行异步通信的不同技术。下面，我将详细介绍它们之间的主要区别：

Ajax

1. 概念: Ajax 并不是一种独立的技术，而是一系列技术的集合，包括 HTML、CSS、JavaScript、DOM、XMLHttpRequest 等。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

2. XMLHttpRequest 对象: Ajax 通常依赖于 XMLHttpRequest 对象来进行通信。这是一个老旧的 API，可以用来执行异步请求。

3. 例子:

   javascript
   var xhr = new XMLHttpRequest();
   xhr.open('GET', 'server.php', true);
   xhr.send();
   
   xhr.onreadystatechange = function() {
       if (xhr.readyState === 4 && xhr.status === 200) {
           console.log(xhr.responseText);
       }
   };

4. 兼容性: XMLHttpRequest 在老版本的浏览器中有很好的兼容性。

5. 缺点: 编写代码较繁琐，不支持 Promise，错误处理和编写异步代码可能比较复杂。

Axios

1. 概念: Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了一个易于使用的 API，可以在客户端执行异步请求。

2. 特点: 支持 Promise，可以很容易地使用 .then() 和 .catch() 方法进行链式调用。Axios 还提供了请求取消、HTTP 自动转换 JSON 数据、客户端支持防御 XSRF 等功能。

3. 例子:

   javascript
   axios.get('/user?ID=12345')
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });

4. 兼容性: Axios 可以用在浏览器和 node.js 中，并且基本上支持所有现代浏览器。

5. 缺点: 相对于 Fetch API，Axios 是一个额外的库，需要单独安装和配置。

Fetch API

1. 概念: Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的部分，例如发起请求。它提供了一个全局 fetch() 方法，具有比 XMLHttpRequest 更加简洁和强大的功能。

2. 特点: Fetch API 基于 Promise 设计，使得异步请求代码更加简洁。它不是以形式参数的形式，而是以配置对象的形式接收请求信息，使得请求更加灵活。

3. 例子:

   javascript
   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));

4. 兼容性: Fetch API 在现代浏览器中得到了良好的支持，但在一些老旧浏览器中可能不可用。

5. 缺点: Fetch API 默认不发送或接收 cookies，如果站点依赖于用户会话，则需要额外的配置。此外，即使请求失败，fetch 也不会拒绝 Promise，只有在网络故障时才会被拒绝。

总结来说，Ajax、Axios 和 Fetch API 提供了实现前端 HTTP 通信的不同方法。Ajax 是最传统的方式，依赖于 XMLHttpRequest。Axios 是一个现代的库，提供了丰富的 API 和易于使用的 Promise 支持。