当用户离开页面时如何可靠地发送HTTP请求

HTTP在某些情况下，当用户执行诸如导航到不同页面或提交表单之类的操作时，需要发送带有一些数据的请求以进行打点记录。例如在点击链接时向服务器发送一些信息.

使用Fetch的keepalive属性

keepalive属性用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。
一个典型的场景就是，用户离开网页时，脚本向服务器提交一些用户行为的统计信息。这时，如果不用keepalive属性，数据可能无法发送，因为浏览器已经把页面卸载了。

<a href="/some-other-page" id="link">Go to Page</a>

<script>
  document.getElementById('link').addEventListener('click', (e) => {
    fetch("/log", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }, 
      body: JSON.stringify({
        some: "data"
      }), 
      keepalive: true
    });
  });
</script>

使用Navigator.sendBeacon()

navigator.sendBeacon() 方法可用于通过 HTTP POST 将少量数据 异步 传输到 Web 服务器。

它主要用于将统计数据发送到 Web 服务器，同时避免了用传统技术（如：XMLHttpRequest）发送分析数据的一些问题。

document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
});

a标签的ping属性

值得一提的是，越来越多的浏览器支持该ping属性。当附加到链接时，它会触发一个小POST请求：

<a href="http://localhost:3000/other" ping="http://localhost:3000/log">
  Go to Other Page
</a>

这些请求标头将包含单击链接的页面 ( ping-from)，以及href该链接的值 (ping-to)：

headers: {
  'ping-from': 'http://localhost:3000/',
  'ping-to': 'http://localhost:3000/other'
  'content-type': 'text/ping'
  // ...other headers
},

它在技术上类似于发送信标，但有一些明显的限制：

它严格限制在链接上的使用，如果您需要跟踪与其他交互相关的数据，例如按钮点击或表单提交，这将使其无法启动。

1. 浏览器支持很好，但不是很好。在撰写本文时，Firefox 特别没有默认启用它。
2. 您无法随请求一起发送任何自定义数据。如前所述，您将获得的最多的是几个 ping-*标题，以及其他任何标题。

综合考虑，ping如果您可以发送简单的请求并且不想编写任何自定义 JavaScript，那么它是一个很好的工具。但是，如果您需要发送更多实质内容，则可能不是最好的选择。