引言

在web 开发中，有时候我们需要在用户关闭或者离开页面时，向服务器发送一些请求，比如统计用户行为，释放资源，更新数据等。
如何在 Web 关闭页面时发送请求呢？
传统方案（XMLHttpRequest）中可能存在一些问题和局限性：

• 请求可能被浏览器中断或者取消。
• 请求可能阻塞页面的卸载, 直接干预了用户的操作 ，影响使用体验 。
  为了解决这些问题，我们可以使用 navigator.sendBeacon() 方法来实现在 Web 关闭页面时发送 Ajax 请求。

  使用

  关闭页面的事件监听

  beforeunload 事件会在document 被卸载前触发，此时卸载这一动作还未发生，还可以在回调中触发弹窗来询问用户是否确认要关闭页面：

  addEventListener("beforeunload",(event)=>{
  return (e.returnValue = 'Leave Site?');
  });

  unload 在document 卸载中触发，此时对于用户所有资源都是不可见的，所有界面交互都无效。通常我们的请求就会在此事件回调中进行。
  

sendBeacon 的使用

Navigator.sendBeacon()就是为关页面前发送请求这一需求特别定制的。
它是异步的方法，意味着它不会阻碍页面卸载，你不用手动去新建XHR 来实现同步请求以确保请求正常完成（大多数请求库都是异步的，比如axios，关闭页面时会直接cancel 掉请求）。
它使用post 方法，并且不能自定义请求头和方法，它会自动根据传入的数据类型自动设置请求头的Content-Type。
但它携带的数据大小有限制，大多数浏览器将其最大限制设定在了64KB。作为一个上报统计数据的api，这个限制几乎不可能会碰到。实在需要发送更大数据时，也可以分批进行发送。