AJAX和XHR、fetch、axios的关系

AJAX中有两套原生的API，一个是XHR(XMLHttpRequest)，一个是Fetch API

axios是第三方库，在浏览器环境中使用的是XHR

umi-request也是第三方库，在浏览器环境中使用的是Fetch

在 AJAX（Asynchronous JavaScript and XML）中，原生的 API 主要有两种：XMLHttpRequest（简称 XHR）和Fetch API。这两者都用于在客户端与服务器之间进行异步通信，但它们有一些关键的区别，尤其是在使用方式、功能和灵活性上。以下是两者的详细比较和作用。

1.XMLHttpRequest（XHR）

XMLHttpRequest 是最早用于在浏览器中执行异步 HTTP 请求的 API，通常用于实现 AJAX 请求。它自 1999 年起就已被引入，长期以来是进行异步请求的标准方法。

主要特点：

语法复杂：使用起来相对较复杂，需要更多的配置和回调函数来处理请求的各个阶段（如发送请求、接收响应等）。
回调函数：它使用回调函数来处理异步响应，需要监听onreadystatechange 事件，或使用onload、onerror 等事件处理程序来处理响应。
支持的请求类型：XMLHttpRequest 支持多种 HTTP 请求方法（如GET、POST、PUT、DELETE 等）。
支持同步和异步请求：可以选择同步（阻塞）或异步（非阻塞）请求，但同步请求会导致浏览器冻结，影响用户体验，因此通常不推荐使用同步请求。
支持跨域请求：通过XMLHttpRequest 进行跨域请求时，需要使用 CORS（跨域资源共享）机制。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true); // true表示异步请求

xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log("Response:", xhr.responseText); // 处理响应数据
} else {
console.error("Request failed with status:", xhr.status);
}
}
};

xhr.send(); // 发送请求

优缺点：

优点：
支持所有主流浏览器。
可以处理复杂的请求场景。
缺点：
使用起来较为复杂，需要手动管理事件和回调。
不支持 Promise，需要额外处理异步操作。

2.Fetch API

Fetch API 是现代浏览器中新加入的用于发起网络请求的 API，相比XMLHttpRequest，Fetch 提供了更简洁、更强大的语法，并且它基于 Promise，支持更直观的异步操作。

主要特点：

基于 Promise：Fetch API 基于 Promise，这使得异步操作更加简洁和灵活。可以通过then() 和catch() 方法处理请求结果和错误。
默认异步：Fetch 请求默认是异步的，因此不会阻塞线程，也没有必要手动设置异步标志。
不支持同步请求：与XMLHttpRequest 不同，Fetch 不支持同步请求，始终是异步的。
响应处理：Fetch 返回的响应对象提供了更丰富的方法来处理响应数据，例如可以方便地将响应解析为 JSON、文本、二进制数据等。
支持 CORS：Fetch 与XMLHttpRequest 一样，支持跨域请求，但其跨域配置更加简洁。

示例代码：

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析为 JSON
  })
  .then(data => {
    console.log("Response data:", data); // 处理数据
  })
  .catch(error => {
    console.error("There was a problem with the fetch operation:", error);
  });

优缺点：

优点：
基于 Promise，代码更加简洁、易于理解和维护。
更好地支持现代 JavaScript 的异步操作（如 async/await）。
对于响应处理（如 JSON 解析）更加方便和灵活。
缺点：
不支持较旧的浏览器（如 IE）。不过可以通过 polyfill 进行兼容。
需要手动处理 HTTP 错误（fetch 仅在网络失败时抛出错误，HTTP 错误状态（如 404、500）不会抛出异常）。

关键区别

|------------|------------------------------------------|-----------------------------------|
| 特性 | XMLHttpRequest | Fetch API |
| API 风格 | 基于事件回调和状态变化 | 基于 Promise，支持 then 和 catch 语法 |
| 默认异步 | 支持同步和异步（不推荐使用同步） | 始终为异步 |
| 响应处理 | 使用 xhr.responseText，需要手动解析数据 | 支持直接解析为 JSON、文本、二进制等 |
| 支持的功能 | 需要手动设置跨域（CORS）、状态检查等 | 自动处理跨域，默认遵循 CORS 标准 |
| 错误处理 | 需要监听 onerror 或 onreadystatechange 事件 | 只会在网络错误时抛出异常，需要手动处理 HTTP 错误 |
| 支持的浏览器 | 广泛支持（包括较旧的浏览器） | 主要支持现代浏览器，需要 polyfill 来兼容旧版浏览器 |
| 同步请求 | 支持（但不推荐） | 不支持同步请求 |

功能点：

总结

-XMLHttpRequest 是传统的 API，适合处理兼容性要求较高的项目，但使用起来较为繁琐，特别是处理回调和异步操作时。

-Fetch API 是现代的、基于 Promise 的 API，提供了更简洁的语法，易于使用，尤其是与async/await 结合使用时，代码更加清晰和可维护。不过，它不支持同步请求，并且需要现代浏览器支持。

因此，现代 Web 开发中，Fetch API 更为推荐，特别是当你的目标浏览器支持它时。如果需要兼容老旧浏览器，可能仍然需要使用XMLHttpRequest 或结合使用 polyfill 来实现。