Beacon API数据上报完美记录活动过程而无需等待响应

需求就是，在浏览器被关闭之前要调用一个后端提供的请求，我一开始用axios,信誓旦旦的说，木有问题，后端后来告诉我，没有接收到有请求，这个时候我就去排除下原因，我debugger看了下，明明有发送请求只不过在unload的时候还是pending状态。猜测是不是请求被中断了。尝试用同步请求发现还是没有用，那我能想到的就是用原生的http同步请求，但是缺点也很明显，性能差。所以我又百思不得其解，终于在mdn上找到了一个api-Beacon

什么是Beacon API？

Beacon API用于少量信息数据发送到服务器，而无需等待响应的过程，无需等待的部分是至关重要的，也是Beacon为何如此有用的关键，即使服务器发送响应，我们的代码也永远不会看到响应。

Beacon API用途

跟踪统计数据和分析数据

大多数人想到的它用途就是分析数据，实际项目中我们可以编写一些JavaScript来跟踪页面中发生的事情来统计与分析用户的需求方向（可能是用户如何与组件交互，他们滚动到多远，不同用户浏览的文章或内容等等），我们需要发送该数据用户离开页面时发送到服务器，Beacon API做得很完美的，因为我们只是记录数据而不需要响应。

调试和记录

平时我们项目中使用循环完成某种功能，但是往往会在发生时无法获得错误信息，而是通过JavaScript或打印到浏览器等方式，如果使用Beacon API检测错误并记录到服务器，这样我们就可以在不需要其他辅助调试的情况下，查看我们的记录就可以轻松知道错误信息。

实际上，任何日志记录任务都可以使用Beacon API执行完成，即在游戏中创建保存点，收集有关功能使用的信息，或记录多变量测试的结果，这些所以记录都可以完成，有人想，未来可能会使用在浏览器中，当浏览器发生其他错误的时候，记录然后发送给客户以便客户知道自己操作哪些功能导致错误，当然目前这个只是想象而且并没有使用在实际当中。

以往方案

• 发起一个同步 XMLHttpRequest
• 使用img元素
• 创建一个几秒的 no-op 循环

Image对象

一个奇怪的角色出现了，Image对象，你可能会问，这两者似乎完全不搭，是怎么产生联系的。通过创建 Image 元素并在卸载文档处理程序中设置其 src 属性来延迟卸载以提交数据。由于大多数用户代理会延迟文档卸载，以完成挂起的图片加载，因此可以在卸载过程中提交数据。Image大体有以下特点：

• 数据上报不需要回馈，对页面没有、也不应该有实际的展示或者交互影响。
• 方法足够轻量，性能消耗小。
• 图片作为替换元素，有src属性可用来传递url
• 兼容性极好

有优点也有缺点，它的缺点：

• 请求方式只能是get
• url长度受限
• 响应数据类型受限，状态处理受限
• 用户代理会延迟文档卸载，以完成挂起的图片加载

有没有一种结合它们优点的方式？

Beacon API就是，官方描述：Beacon 接口用于将异步和非阻塞请求发送到服务器。信标（Beacon）请求使用 HTTP 协议中的 POST 方法，请求通常不需要响应。这个请求被保证在，页面的unload状态从发起到完成之前，被发送。而并不需要一个阻塞请求，例如 XMLHttpRequest

当我们写了这些代码，它会尝试在卸载文档之前将数据发送到服务器。时机过早可能错失收集数据的机会。所以时机控制很重要，恰恰这是开发人员难以做到的，API帮我们解决了。

注意

• sendBeacon()并不是只能在页面生命周期末尾使用，而是任何时候都可以使用。
• 浏览器保证在原始页面已经关闭的情况下也会发送请求。
• 状态码、超时和其他网络原因造成的失败是不透明的，不能通过编程方式处理。