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 来实现。