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）不会抛出异常）。

---

3. 关键区别

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