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。