XHR和Fetch API对比

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();

示例是进行简单的GET请求，请求一个JSON数据。在XMLHttpRequest示例中，创建了一个新的XMLHttpRequest对象，使用open()方法指定请求的方法、URL和是否异步。然后，通过onreadystatechange事件处理程序监听请求的状态变化，并在状态为4（完成）且状态码为200（成功）时，解析响应的JSON数据。

二、Fetch API

1.Fetch特点

（1）Fetch API是ES6引入的现代网络请求接口，提供了一种更简洁和强大的方式来进行网络通信。

（2）它使用Promises来处理异步操作，并且支持使用async/await语法进行更清晰的异步流程控制。Fetch API提供了更直观和简洁的API，使得发送请求和处理响应变得更加容易和灵活。

（3）它支持请求和响应的各种类型，包括JSON、FormData、Blob等。

（4）Fetch API默认不会携带或接收浏览器的cookie，需要手动设置credentials选项。

2.Fetch适用场景

对于现代浏览器环境下的异步请求，特别是需要使用Promises或async/await进行更清晰的异步流程控制时，Fetch API是首选。

当需要处理复杂的请求和响应类型，或者需要在现代浏览器中使用更简洁的API时，Fetch API也是更合适的选项。

3.Fetch示例

fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log('Error:', error.message);
  });

在示例中，使用fetch()函数发送GET请求，并使用.then()方法处理响应。首先检查响应的状态，如果OK，则使用.json()方法解析响应的JSON数据。如果响应不OK，则抛出一个错误。最后，使用.then()方法处理解析后的数据，并使用.catch()方法捕获任何错误。

总体而言，如果需要与旧版浏览器兼容或需要更细粒度地控制请求和响应过程，XHR是一个可行的选择。而在现代浏览器环境下，特别是需要使用Promises或async/await进行更清晰的异步流程控制时，Fetch API是更推荐的选项。