在跳转页面前发送HTTP请求

在不考虑用户体验的情况下很好处理，直接等待请求完成再跳转

Fetch

请求如果使用fetch即可使用keepalive属性

keepalive 选项表示该请求可能会在网页关闭后继续存在。

fetch('/log', {
  method: 'POST',
  header: {
    'Content-Type': 'application/json'
  },
  keepalive: true
})

a标签

a标签中有一个ping属性也可以实现类似的效果

包含一个以空格分隔的 url 列表，当跟随超链接时，将由浏览器 (在后台) 发送带有正文 PING 的 POST 请求。通常用于跟踪。

但是在response的headers中会暴露跳转前和跳转后的地址

{
  "headers": {
    "ping-from": "", // 跳转前的url
    "ping-to": "", // 跳转后的url
    // ...other
  }
}

Navigator.sendBeacon()

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

关闭或跳转页面时使用这个方法也是被推荐的

// 页面在被隐藏或者关闭时触发
document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    // 支持ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据
    const analyticsData = new Blob([JSON.stringify({ username: "tim" })], { type: 'application/json; charset=UTF-8' });
    navigator.sendBeacon('/log', analyticsData);
  }
});

这样会在页面在被隐藏或者关闭时向目标url发送一个post请求