从 XMLHttpRequest 到 Fetch：现代 Web 请求技术的演进

news2025/3/5 6:16:45

在现代 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。