区别：
-
原生API vs ES6新增函数：XHR 是浏览器提供的原生API，而 fetch 是 ES6 中新增的全局函数。
-
使用对象差异：XHR 使用 XMLHttpRequest 对象，而 fetch 使用 Promise 对象。
-
Cookies 默认携带：fetch 默认不会携带 cookies，需要手动设置 credentials 属性；而 XHR 请求会自动携带 cookies。
-
请求取消能力：XHR 可以取消一个正在进行的请求，而 fetch 目前没有原生的请求取消机制。
-
响应类型处理：XHR 的 responseType 属性可以设置响应类型（text、json、blob 等），而 fetch 需要手动解析响应。
-
进度监听功能：XHR 可以监听上传和下载的进度，而 fetch 不支持此功能。
-
错误处理方式：在错误处理方面，fetch 只会在网络错误时 reject Promise，其他错误都会被视为成功的响应，需要手动判断；而 XHR 则会在出现错误时 reject Promise。
-
兼容性：XHR 兼容性更好，在一些旧版本的浏览器中可能无法使用 fetch。
代码示例：
使用 XHR 发送 GET 请求：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();
xhr.open的第三个参数是用于指示请求是否为异步的布尔值。
如果将它设置为 true，则表示该请求是异步的，JavaScript 会在请求发送后继续执行并等待响应。
如果设置为 false，则表示该请求是同步的，JavaScript 会在发送请求后一直等待直到收到响应为止。
使用 fetch 发送 GET 请求：
fetch('https://api.example.com/data')
.then(function(response) {
if (response.ok) {
return response.json();
} else {
throw new Error('Network response was not ok.');
}
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log(error);
});