JS高级 之 网络编程 - XHR && Fetch

在JavaScript中，XHR（XMLHttpRequest）和Fetch是用于网络编程的两种主要方法。

1. XMLHttpRequest

XMLHttpRequest是一种创建HTTP请求和接收HTTP响应的接口。

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

2. Fetch

Fetch是一个现代的、强大的API，用于网络请求。

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

3. 对比

• XMLHttpRequest是一个老旧的API，而Fetch是基于Promises的更现代的API。
• Fetch返回Promise，更适合链式调用，更加符合现代JavaScript的开发习惯。
• Fetch的语法更简洁，更容易理解。
• Fetch默认不会发送cookies，需要显式设置credentials选项。

4. 选择

根据你的需求和环境选择合适的网络请求方式。如果你需要更多的控制，比如需要处理复杂的请求，或者需要兼容旧浏览器，可能会选择XMLHttpRequest。如果你的项目使用现代JavaScript框架，或者不需要处理旧浏览器，推荐使用Fetch。