Fetch、XMLHttpRequest、navigator.sendBeacon：谁是网络请求的王者？

网络请求方法指南：Fetch、XMLHttpRequest 和 Navigator.sendBeacon

引言

在现代网络开发中，发送网络请求至关重要，用于从服务器获取数据、提交表单或进行其他交互。在这篇文章中，我们将探讨三种最常用的网络请求方法：Fetch、XMLHttpRequest 和 Navigator.sendBeacon。我们将深入了解每种方法的优点、缺点和最佳用例，帮助你做出明智的决定，选择最适合你项目需求的方法。

1. Fetch：现代网络请求的宠儿

优点：

• 语法简洁易懂
• 基于 Promise，易于处理异步请求
• 支持各种请求方法（GET、POST、PUT、DELETE 等）
• 可发送自定义请求头和正文
• 可控制请求超时时间
• 支持 CORS 跨域请求

代码示例：

fetch('https://example.com/api/v1/users')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

2. XMLHttpRequest：浏览器兼容性的首选

优点：

• 浏览器兼容性好，支持大多数浏览器
• 可发送自定义请求头和正文
• 可控制请求超时时间
• 支持 CORS 跨域请求

代码示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/v1/users', true);
xhr.onload = function() {
  if (this.status === 200) {
    var data = JSON.parse(this.responseText);
    console.log(data);
  } else {
    console.log('Error: ' + this.status);
  }
};
xhr.send();

3. Navigator.sendBeacon：发送轻量级数据的可靠选择

优点：

• 可在浏览器空闲时发送请求，不影响页面性能
• 即使页面已关闭，也会尽力发送请求，确保数据完整性和可靠性
• 不支持自定义请求头和正文
• 不支持请求超时时间
• 不支持 CORS 跨域请求

代码示例：

navigator.sendBeacon('https://example.com/api/v1/logs', '{"level": "error", "message": "An error occurred"}');

选择合适的网络请求方法

选择最适合你项目的方法取决于你的具体需求。以下是一些指南：

• 轻量级数据传输： 使用 Navigator.sendBeacon 确保即使页面关闭也能发送数据。
• 自定义请求头和正文： 使用 Fetch 或 XMLHttpRequest 发送自定义数据。
• 请求超时时间： 使用 Fetch 或 XMLHttpRequest 控制请求超时。
• 跨域请求： 使用 Fetch 或 XMLHttpRequest 进行跨域请求。

常见问题解答

1. 哪种方法最现代？

   • Fetch

2. 哪种方法具有最好的浏览器兼容性？

   • XMLHttpRequest

3. 哪种方法最适合发送轻量级数据？

   • Navigator.sendBeacon

4. 哪种方法支持 CORS 跨域请求？

   • Fetch 和 XMLHttpRequest

5. 哪种方法基于 Promise？

   • Fetch

总结

Fetch、XMLHttpRequest 和 Navigator.sendBeacon 是网络请求的三个主要选择，每个选择都有其优点和缺点。通过理解每种方法的特性，你可以根据你的具体需求做出明智的决定。无论是发送轻量级数据、自定义请求头还是进行跨域请求，总有一种方法可以满足你的需求。