在浏览器页面销毁后发送请求——beacon api的使用
- Published on
本文最近一次更新于 1462 个天前，其中的内容很可能已经有所发展或是发生改变。
前言
在react、vue等框架中会有一个组件销毁时的方法，用来触发例如离开页面后的方法需要发送请求，但是这些方法在页面关闭以后都将无法触发。这时候可以用到beacon去实现。
使用场景
在浏览器页面销毁后仍需要发送请求
浏览器支持
使用方式
navigator.sendBeacon接收URL和一个参数（ArrayBufferView、Blob、DOMString、FormData）。只返回true或false。
navigator.sendBeacon('https://owlnet.xyz/analytics',`{foo:"bar"}`)
特点
- sendBeacon可以在任何时候使用。
- sendBeacon()后，浏览器会将请求添加到内部的一个队列中。浏览器会主动发送队列中的请求。
- 浏览器在原始页面已经关闭下也会发送请求。
- 不能通过编程获取处理发送的失败的任何原因。
- 会携带调用sendBeacon时所有相关的cookie。
参考资料
- 《javascript高级程序设计第4版》