Fetch API 和 XMLHttpRequest 的区别是什么？

推荐答案

Fetch API 和 XMLHttpRequest 是两种用于在浏览器中进行网络请求的技术，但它们在工作方式、功能和现代性上有显著区别。

1. 语法和易用性：

   • Fetch API：使用 Promise 链式调用，语法简洁，易于理解和使用。
   • XMLHttpRequest：基于回调函数，语法较为复杂，代码可读性较差。

2. 错误处理：

   • Fetch API：只有在网络故障时才会 reject，HTTP 错误状态码（如 404 或 500）不会导致 reject。
   • XMLHttpRequest：可以通过 onerror 和 onload 事件处理网络错误和 HTTP 错误。

3. 请求和响应：

   • Fetch API：提供了更强大的请求和响应对象，支持流式处理和更细粒度的控制。
   • XMLHttpRequest：功能较为基础，不支持流式处理。

4. 兼容性：

   • Fetch API：现代浏览器广泛支持，但在一些旧版浏览器中可能需要 polyfill。
   • XMLHttpRequest：几乎所有浏览器都支持，兼容性更好。

5. 取消请求：

   • Fetch API：可以使用 AbortController 来取消请求。
   • XMLHttpRequest：可以通过 abort() 方法取消请求。

本题详细解读

Fetch API

Fetch API 是现代浏览器提供的一种用于进行网络请求的接口，它基于 Promise 设计，使得异步操作更加简洁和直观。Fetch API 的主要特点包括：

• Promise 支持：Fetch API 返回一个 Promise 对象，可以使用 .then() 和 .catch() 方法处理成功和失败的情况。
• 流式处理：Fetch API 支持流式处理响应数据，可以逐步处理大型数据。
• 请求和响应对象：Fetch API 提供了 Request 和 Response 对象，允许开发者对请求和响应进行更细粒度的控制。
• 错误处理：Fetch API 只有在网络故障时才会 reject，HTTP 错误状态码（如 404 或 500）不会导致 reject，需要手动检查响应状态码。

XMLHttpRequest

XMLHttpRequest 是一种较老的网络请求技术，广泛用于 AJAX 编程。它的主要特点包括：

• 回调函数：XMLHttpRequest 使用回调函数处理异步操作，代码结构较为复杂。
• 事件驱动：XMLHttpRequest 通过事件（如 onload、onerror）来处理请求的成功和失败。
• 兼容性：XMLHttpRequest 几乎在所有浏览器中都得到支持，兼容性非常好。
• 取消请求：XMLHttpRequest 提供了 abort() 方法，可以随时取消正在进行的请求。

使用场景

• Fetch API：适用于现代 Web 应用，特别是需要处理复杂请求和响应的场景。
• XMLHttpRequest：适用于需要兼容旧版浏览器的场景，或者在使用 Fetch API 不可行的情况下。

示例代码

Fetch API 示例

// www.javascriptcn.com code example
fetch('https://api.example.com/data')
  .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:', error));

XMLHttpRequest 示例

// www.javascriptcn.com code example
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Request failed with status:', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('Network error');
};
xhr.send();

通过以上对比和示例，可以看出 Fetch API 和 XMLHttpRequest 在语法、功能和适用场景上的主要区别。