fetch 和 xhr 有什么区别？

Fetch API和XMLHttpRequest（XHR）都是用于在浏览器中发起HTTP请求的技术。

XMLHttpRequest (XHR):

1. 历史悠久： XHR出现的比较早，它是Ajax技术的基石，自2000年代初以来一直被广泛使用。
2. 复杂性： XHR的API相对复杂，使用时需要管理不同的事件和状态变化。
3. 支持状态： 它支持对请求的细粒度控制，比如可以在下载过程中监控进度事件。
4. 灵活性： XHR允许同步和异步通信。
5. 兼容性： 它的兼容性很好，支持老旧的浏览器。

Fetch API:

1. 现代替代： Fetch是一个现代化的替代方案，提供了更简单、更强大的方式来发起网络请求。
2. 基于Promise： Fetch API基于Promise，这使得异步操作更加简洁，易于管理。
3. 语法简洁： Fetch提供了一个更加简洁和清晰的API，易于阅读和写作。
4. 无需额外的库： 与XHR配合一些库（如jQuery）使用相比，Fetch不需要额外的库或框架。
5. 默认异步： Fetch只支持异步操作，这有助于防止阻塞用户界面的问题。

例子：

使用XHR发起GET请求的代码可能如下：

javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

而使用Fetch API完成同样的任务的代码则更加简洁：

javascript
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Fetch API的优势在于它的简洁性和基于Promise的结构，这使得异步编码更加直观和易于维护。同时，Fetch还支持Request和Response接口，这有利于进一步控制请求和响应的细节。不过，对于一些需要细粒度控制的场合，或者在需要支持老旧浏览器的环境下，XHR仍然是一个可行的选择。