Fetch和XHR有什么区别？

区别：

1. 原生API vs ES6新增函数：XHR 是浏览器提供的原生API，而 fetch 是 ES6 中新增的全局函数。

2. 使用对象差异：XHR 使用 XMLHttpRequest 对象，而 fetch 使用 Promise 对象。

3. Cookies 默认携带：fetch 默认不会携带 cookies，需要手动设置 credentials 属性；而 XHR 请求会自动携带 cookies。

4. 请求取消能力：XHR 可以取消一个正在进行的请求，而 fetch 目前没有原生的请求取消机制。

5. 响应类型处理：XHR 的 responseType 属性可以设置响应类型（text、json、blob 等），而 fetch 需要手动解析响应。

6. 进度监听功能：XHR 可以监听上传和下载的进度，而 fetch 不支持此功能。

7. 错误处理方式：在错误处理方面，fetch 只会在网络错误时 reject Promise，其他错误都会被视为成功的响应，需要手动判断；而 XHR 则会在出现错误时 reject Promise。

8. 兼容性：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 会在发送请求后一直等待直到收到响应为止。

---

XMLHttpRequest 对象的 readyState 属性表示请求的状态，status 属性表示 HTTP 状态。
readyState 的可能取值包括：
0: 未初始化，尚未调用 open 方法
1: 启动，已经调用 open 方法，但尚未调用 send 方法
2: 发送，已经调用 send 方法，但尚未接收到响应
3: 接收，已经接收到部分数据
4: 完成，已经接收到全部数据，并且可以在客户端使用
status 的可能取值包括（部分常见的）：
200: 请求成功
404: 未找到页面
500: 服务器内部错误
302: 重定向等

---

使用 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);
    });