怎样在页面关闭时发起HTTP请求

比如有需求是要让页面关闭时, 在数据库中记录用户的一些数据或log日志. 这时就需要在用户关闭页面时发起HTTP请求.

做法是对window.onunload设置事件监听函数, 在函数内发起AJAX请求.

不过有时候页面已经卸载了, 但请求还没有发出, 这时就失败了, 解决这一问题的思路有两种:

1. 在监听函数内做一些比较耗时的操作, 保证请求发出;

2. 使用Navigator.sendBeacon().

方法一: 耗时法.

function log() {
  let xhr = new XMLHttpRequest();
  xhr.open('post', '/log', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('foo=bar');
}
 
window.addEventListener('unload', function(event) {
  log();
 
  // a time-consuming operation
  for (let i = 1; i < 10000; i++) {
    for (let m = 1; m < 10000; m++) { continue; }
  }
});

方法二: Navigator.sendBeacon()

window.addEventListener('unload', logData, false);
 
function logData() {
  navigator.sendBeacon('/log', analyticsData);
}

注意: 

1. 增加耗时操作或添加setTimeout都是不合理的, 尽管确实能解决问题.

2. Navigator.sendBeacon()会作为浏览器进程任务, 与当前页面脱钩, 这是处理这一需求的专用方法.

3. Navigator.sendBeacon()是一个可跨域的POST请求, 且不能回调.