浏览器关闭发送异步请求

前言： 最近的需求，收集用户在某个页面填写的信息，我们用的是vue所以在内部路由来回跳转发起请求是很好做的，但是需求还要求在关闭页面直接退出的情况下也要收集相关信息。

beforeunload & unload

beforeunload 和 unload 刷新页面或者关闭卸载页面时都执行

一开始就想到了这两个方法，但是我们请求接口用的axios异步的方式，这两个方法是没办法承载异步请求的，因为在刷新和关闭页面时通讯的桥梁就被关闭了，数据请求就被阻断啦。 然后就各种百度，百度上面很多的例子来解决，我这边都尝试了还是不可以。最后看到了一个Beacon

Navigator.sendBeacon()

这是mozilla给的说明，详细请查看mozilla网站

visibilitychange

在Navigator.sendBeacon的介绍里面有提到数据埋点推荐使用visibilitychange来替代beforeunload unload

网站通常希望在用户完成页面浏览后向服务器发送分析或诊断数据，最可靠的方法是在visibilitychange (en-US) 事件发生时发送数据：

过去，许多网站使用 unload (en-US) 或 beforeunload (en-US) 事件以在会话结束时发送统计数据。然而这是不可靠的，在许多情况下（尤其是移动设备）浏览器不会产生 unload、beforeunload 或 pagehide 事件。下面列出了一种不触发上述事件的情况：

1、用户加载了网页并与其交互。

2、完成浏览后，用户切换到了其它应用程序，而不是关闭选项卡。

3、随后，用户通过手机的应用管理器关闭了浏览器应用。

此外，unload 事件与现代浏览器实现的往返缓存（bfcache）不兼容。在部分浏览器（如：Firefox）通过在 bfcache 中排除包含 unload 事件处理器的页面来解决不兼容问题，但这存在性能损失。其它浏览器，例如 Safari 和 Android 上的 Chrome 浏览器则采取用户在同一标签页下导航至其它页面时不触发 unload 事件的方法来解决不兼容问题。

Firefox 也会在 bfcache 中排除包含 beforeunload 事件处理器的页面。

使用 pagehide 作为回退

可使用 pagehide (en-US) 事件来代替部分浏览器未实现的 visibilitychange 事件。和 beforeunload 与 unload 事件类似，这一事件不会被可靠地触发（特别是在移动设备上），但它与 bfcache 兼容。

visibilitychange示例

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

当然我的需求也是用的 visibilitychange 和 sendBeacon来解决的，但是在移动端偶尔也会不请求，不过产品没有那么苛刻，因为我给她解释了这个方法会存在不稳定性就放过我了。你们要是产品比较严苛的话可以用mozilla推荐的pagehide这个方法来辅助实现。但我觉得最好要给产品解释下不稳定性的因素存在。