XHR和Fetch API对比

        

目录

一、XMLHttpRequest（XHR）

1.XHR特点

2.XHR适用场景

3.XHR示例

二、Fetch API

1.Fetch特点

2.Fetch适用场景

3.Fetch示例

---

        

        XMLHttpRequest（XHR）和Fetch API都是用于在前端进行网络通信的工具，但它们各有各的特点

一、XMLHttpRequest（XHR）

1.XHR特点

（1）XHR是早期的标准，是用于在浏览器中进行异步通信的基础技术。

（2）它使用回调函数来处理异步操作，通过设置事件处理程序来监听请求的状态变化。

（3）XHR不支持Promises，因此在处理多个异步请求时可能需要使用回调嵌套或其他管理技巧。

（4）XHR支持在请求和响应过程中对数据进行更细粒度的控制，例如设置请求头、自定义超时时间等。由于XHR的历史悠久，它在一些旧版浏览器中具有更好的兼容性。

2.XHR适用场景

        对于需要在不刷新整个页面的情况下进行异步数据交换的简单请求，XHR是一个可行的选择。

        当需要更细粒度地控制请求和响应过程，或者需要与旧版浏览器兼容时，XHR是更合适的选项。

3.XHR示例

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是更推荐的选项。