深入理解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请求的示例代码：
javascript
// 示例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请求。