1. 什么是 XHR（XMLHttpRequest）？
XMLHttpRequest（简称XHR）是 JavaScript 中用来与服务器进行异步通信的一种机制，最早出现在浏览器中，用于发送 HTTP 请求并接收响应。XHR 在浏览器上与服务器之间建立连接，可以进行 GET、POST 等请求方式。它的一个特点是需要较多的代码来处理回调函数，代码风格相对较为复杂。
2. 什么是 Fetch API？
Fetch API 是现代 JavaScript 的一部分，提供了一个更为简洁、灵活、基于 Promise 的接口来处理网络请求。与传统的 XHR 相比，Fetch 具有更简洁的语法，更加容易进行链式调用，且返回的是 Promise 对象，使得异步操作的写法更加符合现代 JavaScript 的开发习惯。
3. XHR 和 Fetch 的对比
| 特性 | XHR | Fetch |
|---|---|---|
| 语法 | 较为繁琐，依赖回调函数 | 简洁，基于 Promise，支持 async/await |
| 支持的请求方式 | GET、POST、PUT、DELETE 等 | 同样支持所有 HTTP 请求方法 |
| 响应处理 | 通过回调函数处理，支持多种格式（如 text、json） | 通过 .then() 或 async/await 处理，返回的是 Response 对象 |
4. XHR 的代码示例：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
5. Fetch 的代码示例：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('请求失败', error));
6. 优缺点总结
- XHR 优点：
- 兼容性好，几乎所有浏览器都支持。
- 适用于一些老旧项目中，特别是需要与老版本浏览器兼容时。
- Fetch 优点：
- 语法简洁，代码更易于理解。
- 原生支持 Promise，可以更好地与 async/await 配合使用。
- 更加现代化，支持更多的网络请求特性。
7. 总结
尽管 XMLHttpRequest 仍然是一个可用的工具，但随着 Fetch API 的出现，它已经成为了现代 JavaScript 开发的标准。Fetch 提供了更简洁、更强大的功能，特别是在处理异步请求时，它能够减少代码量，提高可读性。因此，尽量使用 Fetch，除非你的项目存在特定的兼容性要求。
