深入理解XHR和Fetch

深入理解XHR和Fetch

在Web开发中，XHR（XMLHttpRequest）和Fetch是两种用于发送HTTP请求的JavaScript API。它们都允许浏览器与服务器之间进行通信，但在一些方面有着不同的特性和用法。

XHR（XMLHttpRequest）

XMLHttpRequest是一个可以与服务器进行异步通信的JavaScript对象，最初由Microsoft引入到IE浏览器中，后来被其他浏览器采纳。XHR的主要特点包括：

• 提供了一个事件驱动的接口，可以在请求的不同阶段（如请求发送、接收到响应等）监听并执行相应的操作。
• 可以通过设置请求头、发送数据、接收响应等来实现各种类型的HTTP请求。
• 支持同步和异步模式，默认为异步模式，可以通过设置async参数为false来使用同步模式。
• 由于历史原因和兼容性考虑，XHR有一些限制和不足，例如跨域请求时需要处理跨域资源共享（CORS）等。

Fetch API

Fetch API是一种现代的JavaScript API，提供了一种更简洁、灵活的方式来处理HTTP请求。Fetch的主要特点包括：

• 基于Promise，使用起来更加简洁和直观，可以链式调用then()方法处理响应。
• 默认使用CORS，可以轻松地处理跨域请求。
• 提供了更加友好的接口，包括fetch()函数用于发送请求，Response对象表示响应等。
• 支持流式操作，可以处理不同类型的数据，如JSON、Blob、FormData等。

示例：使用Fetch发送GET请求

下面是一个使用Fetch API发送GET请求的示例代码：

// 示例1
fetch('/api/github/search/users?q=keyword')
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

// 示例2: 使用async, await
try {
  const res = await fetch(`/api/github/search/users?q=${keyword || 'h'}`);
  const data = await res.json();
  if (data && data.items) {
    this.setState({ users: data.items || [] });
  }
} catch (error) {
    console.error(error);
}

在这个示例中，我们使用fetch()函数发送了一个GET请求，并通过.then()方法处理了响应数据。如果请求成功，response.json()方法将返回一个Promise对象，解析为JSON格式的数据。如果请求失败，.catch()方法将捕获到错误并进行处理。

通过这个示例，我们可以看到使用Fetch API相对于XHR来说，代码更加简洁，使用起来更加直观和便捷。

在实际开发中，我们可以根据具体的需求和兼容性考虑选择使用XHR或Fetch API来处理HTTP请求。

参考

• 深入理解XHR和Fetch
• 完整代码