JS采集数据爬虫-Fetch API 和 XMLHttpRequest 有什么区别？

Fetch API 和 XMLHttpRequest 都是用于在客户端发起网络请求的工具，但它们在设计、使用方式、功能特性等方面存在显著区别。以下是两者的详细对比：

1. 设计与理念

• Fetch API ：

  • 是现代的网络请求 API，设计上更简洁、更符合现代 JavaScript 的编程范式。
  • 基于 Promise ，支持异步操作，代码更简洁，易于阅读和维护。
  • 采用链式调用和 async/await ，使得异步代码更接近同步代码的写法。

• XMLHttpRequest ：

  • 是早期的网络请求 API，设计上较为复杂，需要手动处理各种状态。
  • 不支持 Promise，依赖于回调函数来处理异步操作，容易导致回调地狱（callback hell）。
  • 需要手动检查 readyState 和 status ，代码冗长且易出错。

2. 使用方式

Fetch API：

JavaScript复制

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 或 response.text()、response.blob()
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

• 使用 Promise ，支持链式调用。
• 可以通过 .json() 、 .text() 、 .blob() 等方法直接处理响应体。
• 错误处理通过 .catch() 实现。

XMLHttpRequest：

JavaScript复制

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 第三个参数为 true 表示异步
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 处理返回的数据
  } else if (xhr.readyState === 4) {
    console.error('Request failed with status:', xhr.status);
  }
};
xhr.send();

• 需要手动设置请求方法和 URL。
• 通过 onreadystatechange 事件监听请求状态变化。
• 需要手动检查 readyState 和 status 。
• 错误处理需要在回调中手动实现。

3. 功能特性

• Fetch API ：

  • Promise 支持 ：基于 Promise，可以使用 async/await ，代码更简洁。
  • 默认行为 ：默认不发送跨域请求（CORS），需要服务器支持。
  • 请求和响应对象 ：提供了更丰富的 Request 和 Response 对象，支持多种响应类型（如 JSON、Blob、ArrayBuffer 等）。
  • 错误处理 ：只有在请求无法发出时才触发 .catch() ，网络错误（如 404、500）不会触发 .catch() ，需要手动检查 response.ok 。
  • 全局拦截 ：可以通过 Response 对象的 .clone() 方法实现全局拦截。

• XMLHttpRequest ：

  • 回调机制 ：依赖回调函数，代码可读性较差。
  • 状态码检查 ：需要手动检查 readyState 和 status 。
  • 跨域限制 ：同样受限于 CORS，但处理方式更复杂。
  • 错误处理 ：需要在回调中手动处理错误。
  • 功能限制 ：不支持 Promise ，无法直接处理 JSON 等复杂数据类型。

4. 兼容性

• Fetch API ：

  • 是现代浏览器的特性，不支持 IE 浏览器。
  • 在旧版本浏览器中可以通过 polyfill （如 whatwg-fetch ）来兼容。

• XMLHttpRequest ：

  • 兼容性极好，支持几乎所有浏览器，包括 IE。
  • 适合需要兼容旧浏览器的项目。

5. 性能与效率

• Fetch API ：

  • 性能优化较好，支持 HTTP/2 和缓存策略。
  • 基于 Promise 的异步处理机制更高效。

• XMLHttpRequest ：

  • 性能稍逊，尤其是在处理大量异步请求时。
  • 代码复杂度较高，可能导致性能瓶颈。

6. 社区与生态

• Fetch API ：

  • 是现代开发的推荐方式，社区支持良好。
  • 更容易与其他现代 JavaScript 框架（如 React、Vue、Angular）集成。

• XMLHttpRequest ：

  • 逐渐被现代开发淘汰，但在一些旧项目中仍然广泛使用。

总结

• Fetch API 是现代开发的首选，适用于新项目或需要重构的项目。它更简洁、功能更强大，且与现代 JavaScript 的特性（如 Promise、async/await）无缝集成。
• XMLHttpRequest 更适合一些需要兼容旧浏览器的项目，或者在一些遗留代码中继续使用。但在新项目中，建议优先考虑 Fetch API 。