在现代 Web 开发中，与服务器进行数据交互是必不可少的一部分。无论是加载动态内容、提交表单数据，还是实现实时更新，都需要通过 HTTP 请求来完成。本文将介绍两种主流的 Web 请求技术：XMLHttpRequest 和 Fetch API，探讨它们的优缺点、使用场景以及如何选择合适的技术。
1. XMLHttpRequest：Web 请求的基石
什么是 XMLHttpRequest？
XMLHttpRequest 是一个 JavaScript 对象，用于在浏览器和服务器之间发送 HTTP 请求。它是实现 AJAX（Asynchronous JavaScript and XML）的核心技术，允许网页在不重新加载的情况下与服务器交换数据。
核心特点
-
异步通信：可以在后台发送请求，不会阻塞页面渲染。
-
支持多种数据格式：虽然名字中包含 XML，但它可以处理 JSON、HTML、纯文本等多种数据格式。
-
跨域请求：通过 CORS（跨域资源共享）支持跨域请求。
基本用法
以下是 XMLHttpRequest 的基本使用步骤：
创建对象：
const xhr = new XMLHttpRequest();配置请求：
-
使用
open()方法设置请求类型（GET、POST 等）和目标 URL。 -
例如：
xhr.open('GET', 'https://api.example.com/data', true);
设置回调函数：
-
监听
onreadystatechange事件，处理服务器响应。 -
例如：
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);} };
发送请求：
-
使用
send()方法发送请求。 -
例如：
xhr.send();
处理响应：
-
通过
responseText或responseXML获取服务器返回的数据。
完整的示例：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {const data = JSON.parse(xhr.responseText);console.log(data);}
};
xhr.send();优缺点
-
优点：
-
兼容性好，几乎支持所有浏览器。
-
功能强大，支持多种数据格式和跨域请求。
-
-
缺点：
-
语法复杂，回调函数嵌套容易导致“回调地狱”。
-
错误处理不够直观。
-
2. Fetch API：现代 Web 请求的新标准
什么是 Fetch？
Fetch 是现代浏览器提供的一个用于发起网络请求的 API，旨在替代 XMLHttpRequest。它基于 Promise，提供了更简洁、灵活的语法，并支持流式数据处理。
核心特点
-
基于 Promise：使用
Promise处理异步操作，代码更易读。 -
简洁的语法：相比
XMLHttpRequest，Fetch的代码更简洁直观。 -
流式数据处理：支持处理大文件或流式数据。
-
内置 CORS 支持：默认支持跨域请求。
基本用法
以下是 Fetch 的基本使用示例：
发起 GET 请求：
fetch('https://api.example.com/data').then(response => response.json()) // 将响应解析为 JSON.then(data => console.log(data)) // 处理数据.catch(error => console.error(error)); // 捕获错误发起 POST 请求：
fetch('https://api.example.com/data', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ key: 'value' }) // 发送 JSON 数据
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));处理响应：
-
response.json()：解析为 JSON。 -
response.text()：解析为文本。 -
response.blob()：解析为二进制数据（如图片、文件）。 -
response.arrayBuffer()：解析为二进制数组。
错误处理：
-
Fetch只有在网络错误时才会触发catch，HTTP 错误（如 404、500）需要通过response.ok或response.status手动检查。 -
例如：
fetch(url).then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then(data => console.log(data)).catch(error => console.error(error));
高级用法
设置请求头：
fetch(url, {headers: {'Authorization': 'Bearer token','Content-Type': 'application/json'}
}); 超时控制：Fetch 本身不支持超时设置，但可以通过 Promise.race 实现
const timeout = new Promise((resolve, reject) => {setTimeout(() => reject(new Error('Request timed out')), 5000);
});Promise.race([fetch(url), timeout]).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));取消请求：使用 AbortController 取消请求
const controller = new AbortController();
const signal = controller.signal;fetch(url, { signal }).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));// 取消请求
controller.abort();优缺点
-
优点：
-
语法简洁，基于 Promise，易于使用。
-
支持流式数据处理和更强大的功能。
-
-
缺点：
-
需要手动检查 HTTP 错误。
-
兼容性较差（不支持 IE 浏览器）。
-
3. XMLHttpRequest vs Fetch：如何选择？
| 特性 | XMLHttpRequest | Fetch |
|---|---|---|
| 语法 | 基于回调，较复杂 | 基于 Promise，更简洁 |
| 错误处理 | 自动处理 HTTP 错误 | 需要手动检查 HTTP 错误 |
| 流式数据处理 | 不支持 | 支持 |
| 取消请求 | 使用 xhr.abort() | 使用 AbortController |
| 兼容性 | 所有浏览器支持 | 现代浏览器支持 |
选择建议
-
使用 Fetch：
-
如果你的项目面向现代浏览器，推荐使用
Fetch，因为它更简洁、功能更强大。 -
如果需要处理流式数据或实现更复杂的请求逻辑，
Fetch是更好的选择。
-
-
使用 XMLHttpRequest：
-
如果需要兼容旧浏览器（如 IE），
XMLHttpRequest是唯一的选择。 -
如果你对
Fetch的错误处理机制不满意，也可以选择XMLHttpRequest。
-
4. 总结
从 XMLHttpRequest 到 Fetch，Web 请求技术经历了显著的演进。XMLHttpRequest 作为 AJAX 的基石，为现代 Web 应用奠定了基础；而 Fetch 则以其简洁的语法和强大的功能，成为现代开发的首选工具。
在实际开发中，选择哪种技术取决于项目需求和目标用户。如果你需要兼容旧浏览器，XMLHttpRequest 是可靠的选择；如果你追求更现代的开发体验，Fetch 无疑是更好的工具。无论选择哪种技术，理解它们的原理和使用场景，都是成为一名优秀开发者的关键。