当前位置：首页 > 文章列表 > 文章 > 前端 > FetchAPI和XMLHttpRequest对比详解

FetchAPI和XMLHttpRequest对比详解

2025-12-05 10:16:28 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《Fetch API 与 XMLHttpRequest 对比解析》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

Fetch API语法更简洁，基于Promise，易于读写；2. XHR使用事件回调，代码复杂但控制精细；3. Fetch需手动处理HTTP错误，XHR通过状态码判断；4. Fetch原生支持AbortController、流响应等现代特性；5. XHR兼容老旧浏览器，Fetch需polyfill；6. 现代项目推荐Fetch，旧系统或精细控制场景可用XHR。

JavaScript 网络请求：Fetch API 与 XMLHttpRequest 的对比

在现代前端开发中，发送网络请求是与服务器交互的核心操作。JavaScript 提供了多种方式实现这一功能，其中最常用的是 Fetch API 和传统的 XMLHttpRequest（XHR）。虽然两者都能完成请求任务，但在语法、可读性、功能和兼容性上存在明显差异。下面从多个维度进行对比，帮助你理解何时使用哪种方式。

语法简洁性与可读性

Fetch API 采用现代 JavaScript 的 Promise 语法，代码更简洁、逻辑更清晰。

Fetch 示例：

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

而 XMLHttpRequest 使用事件驱动模型，嵌套回调多，代码结构较复杂。

XHR 示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.onerror = function () {
  console.error('Request failed');
};
xhr.send();

显然，Fetch 写法更符合现代开发习惯，易于理解和维护。

错误处理机制

Fetch API 的错误处理容易被误解：只有网络错误会触发 catch，HTTP 状态码如 404 或 500 不会自动抛错，需要手动判断 response.ok。

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error(response.status);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

XMLHttpRequest 则通过检查 status 和 readyState 来判断请求结果，虽然繁琐但控制更直接。

对现代特性的支持

Fetch 原生支持 JSON、流式响应、AbortController（用于取消请求）等现代特性。

使用 AbortController 可轻松中断请求：

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log(data));

// 取消请求
controller.abort();

支持 Headers、Request、Response 等类，便于封装和测试。
与 async/await 结合更自然：

async function getData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error(response.status);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

相比之下，XMLHttpRequest 对这些新特性的支持较弱，需额外封装才能实现类似功能。