【Web API系列】XMLHttpRequest API和Fetch API深入理解与应用指南

---

前言

在现代Web开发中，客户端与服务器之间的异步通信是构建动态应用的核心能力。无论是传统的AJAX技术（基于XMLHttpRequest）还是现代的Fetch API，它们都为实现这一目标提供了关键支持。本文将从底层原理、核心功能、代码实践到实际应用场景，系统性地对比和分析这两种API的异同，帮助你掌握如何在不同场景下选择最佳解决方案。

---

---

一、XMLHttpRequest API：传统异步请求的基石

1.1 核心概念与工作原理

XMLHttpRequest（XHR）是浏览器提供的原生API，用于在不刷新页面的情况下与服务器交换数据。其核心流程包括：

1. 实例化对象：通过构造函数创建XMLHttpRequest实例。
2. 配置请求：指定HTTP方法、URL及是否异步。
3. 绑定事件：监听请求状态变化（如onload、onerror）。
4. 发送请求：调用send()方法并处理响应数据。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {if (xhr.status === 200) {console.log(JSON.parse(xhr.responseText));} else {console.error('请求失败:', xhr.status);}
};
xhr.onerror = function() {console.error('网络错误');
};
xhr.send();

1.2 关键功能与高级用法

• 同步与异步模式

  // 同步请求（阻塞主线程，不推荐）
  xhr.open('GET', 'https://api.example.com/data', false);
  xhr.send();
  console.log(xhr.responseText);
  

• 处理二进制数据

  xhr.responseType = 'arraybuffer';
  xhr.onload = function() {const buffer = xhr.response;// 处理二进制数据（如图像或文件）
  };
  

• 上传进度监控

  xhr.upload.onprogress = function(event) {const percent = (event.loaded / event.total) * 100;console.log(`上传进度: ${percent}%`);
  };
  

• 超时控制

  xhr.timeout = 5000; // 5秒超时
  xhr.ontimeout = function() {console.error('请求超时');
  };
  

1.3 局限性分析

1. 回调地狱：事件监听机制导致代码嵌套复杂。
2. 错误处理不统一：需手动检查HTTP状态码和网络错误。
3. 不支持Promise：与现代异步编程模式不兼容。

---

二、Fetch API：现代Web请求的标准方案

2.1 设计理念与核心优势

Fetch API基于Promise设计，提供更简洁、灵活的请求方式，并天然支持以下特性：

• 链式调用：避免回调嵌套。
• Streams API集成：处理流式数据（如大文件下载）。
• CORS与安全策略：默认不发送跨域Cookie，需显式配置。

2.2 基础用法与代码示例

fetch('https://api.example.com/data').then(response => {if (!response.ok) throw new Error('HTTP错误');return response.json();}).then(data => console.log(data)).catch(error => console.error('请求失败:', error));

2.3 高级功能实践

• 自定义请求头与模式

  fetch('https://api.example.com/data', {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': 'Bearer token'},body: JSON.stringify({ key: 'value' }),mode: 'cors', // 跨域模式credentials: 'include' // 包含Cookie
  });
  

• 中断请求（AbortController）

  const controller = new AbortController();
  setTimeout(() => controller.abort(), 5000);fetch('https://api.example.com/data', {signal: controller.signal
  }).catch(error => {if (error.name === 'AbortError') {console.log('请求被手动取消');}
  });
  

• 流式数据处理

  fetch('https://api.example.com/large-file').then(response => {const reader = response.body.getReader();return new ReadableStream({start(controller) {function push() {reader.read().then(({ done, value }) => {if (done) {controller.close();return;}controller.enqueue(value);push();});}push();}});}).then(stream => new Response(stream)).then(response => response.blob());
  

2.4 常见问题与解决方案

• 错误处理优化：

  async function fetchWithRetry(url, retries = 3) {for (let i = 0; i < retries; i++) {try {const response = await fetch(url);if (!response.ok) throw new Error('HTTP错误');return await response.json();} catch (error) {if (i === retries - 1) throw error;await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));}}
  }
  

• 超时封装：

  function fetchWithTimeout(url, timeout = 5000) {return Promise.race([fetch(url),new Promise((_, reject) =>setTimeout(() => reject(new Error('请求超时')), timeout))]);
  }
  

---

三、XMLHttpRequest与Fetch API的深度对比

3.1 功能特性对比

特性	XMLHttpRequest	Fetch API
Promise支持	否	是
请求取消	是（abort()）	是（AbortController）
流式数据处理	有限支持	完全支持
CORS处理	需手动配置	默认安全策略
Service Worker	不支持	完全集成

3.2 性能与适用场景

• XMLHttpRequest适用场景：

  • 需要监控上传/下载进度。
  • 兼容旧版浏览器（如IE10及以下）。

• Fetch API推荐场景：

  • 现代Web应用开发。
  • 需要与Service Worker配合实现离线缓存。
  • 处理流式数据或大文件。

---

四、实战案例：构建一个健壮的HTTP客户端

4.1 基于Fetch的封装库

class HttpClient {constructor(baseURL, headers = {}) {this.baseURL = baseURL;this.headers = headers;}async request(endpoint, options = {}) {const url = `${this.baseURL}${endpoint}`;const response = await fetch(url, {...options,headers: { ...this.headers, ...options.headers }});if (!response.ok) {const error = new Error(`HTTP ${response.status}`);error.response = response;throw error;}const contentType = response.headers.get('content-type');if (contentType?.includes('application/json')) {return response.json();}return response.text();}get(endpoint, params) {const query = new URLSearchParams(params).toString();return this.request(`${endpoint}?${query}`, { method: 'GET' });}post(endpoint, body) {return this.request(endpoint, {method: 'POST',body: JSON.stringify(body),headers: { 'Content-Type': 'application/json' }});}
}// 使用示例
const api = new HttpClient('https://api.example.com', {Authorization: 'Bearer token'
});
api.get('/users', { page: 1 }).then(users => console.log(users));

4.2 实现文件分片上传

async function uploadFile(file, chunkSize = 1024 * 1024) {const totalChunks = Math.ceil(file.size / chunkSize);for (let i = 0; i < totalChunks; i++) {const start = i * chunkSize;const end = Math.min(start + chunkSize, file.size);const chunk = file.slice(start, end);const formData = new FormData();formData.append('file', chunk);formData.append('chunkIndex', i);formData.append('totalChunks', totalChunks);await fetch('/upload', {method: 'POST',body: formData});}
}

---

总结

XMLHttpRequest作为Web异步通信的奠基者，至今仍在特定场景下发挥作用，而Fetch API凭借其现代化的设计正在成为主流选择。开发者需要根据以下因素决策：

1. 浏览器兼容性：如需支持旧版浏览器，XHR仍是必要选项。
2. 功能需求：进度监控、请求取消等特性可能影响技术选型。
3. 代码可维护性：Fetch的Promise链与async/await语法更易维护。

未来，随着Web Streams API和Service Worker的普及，Fetch API将在性能优化和离线体验领域展现更大潜力。建议在新项目中优先采用Fetch，同时保持对XHR原理的理解以应对遗留系统维护需求。