简介

很多时候，当用户关闭应用程序窗口或离开应用程序窗口时，我们的应用程序需要向服务器发送数据。分析、页面统计可能是使用这些数据的领域。一个非常直观的想法是我们必须处理窗口.onunload或者window.on卸载前事件。这些事件在窗口卸载阶段触发。然而，如果我们通过引发XMLHttpRequest异步执行这样的操作，事情就会变得一团糟。本文将关注这样一个场景，并提供最近登陆Chrome Canary和Firefox Nightly的一个新特性来实现相同的功能，在窗口运行的最后几分钟，物联网是什么，我们有两个主要事件触发：

用例是当用户关闭窗口或离开窗口时，我们将向服务器发出请求。

窗口.onunload=函数（evt）{

var _xhr=new XMLHttpRequest（）；

_xhr.ON加载=函数（e）{

如果(_xhr.readyState文件==4）{

如果(_xhr状态==200）{

//成功

}

否则{

//错误

}

}

}

_xhr.onerror公司=函数（错误）{

//请求错误

}

_xhr打开（"POST"，什么是云服务器，url，false）；//异步请求

_xhr.发送（）；

}

这个实现中的问题对我们来说是非常微妙和重要的地址。我们已经向服务器发出了一个异步请求，该请求将在将来某个时候被处理并将结果返回给客户端。但是当响应返回到响应回调时，手机自助建站，窗口已经卸载，与其相关的资源也已经卸载。这会导致"找不到函数"错误。

到目前为止，我们一直在通过提出同步请求来解决此问题，以便在处理请求并将结果返回回调之前不会卸载窗口。从实现的角度来看，电力物联网，这是好的，但从性能的角度来看，这是相当糟糕的。窗口卸载的延迟是相当明显的，如果你要导航到另一个页面，那么导航会因为同步操作而变慢。

sendBeacon to The rescue

最近登陆了Chrome canary和Firefox nightly，sendBeacon API允许开发者解决这个问题。sendBeacon API允许开发人员向服务器发出异步请求。

window.addEventListener文件（'unload'，function（）{

var status=导航器.sendBeacon（"/log"，分析数据）；

}，假）；

API有2个参数：

返回一个值，表示浏览器是否成功地将要传输的数据排队。

sendBeaon API有一些操作指南。

W3 org关于sendBeacon API行为的摘录：

如果用户代理限制了要传输的数据量可以排队等待使用此API发送，并且数据的大小导致超过该限制，此方法返回false。返回值true表示浏览器已将数据排队等待传输。但是，由于实际的数据传输是异步进行的，因此该方法不提供数据传输是否成功的任何信息。实际的数据传输可能发生在页面卸载之后。为了仍然是开发人员的一个有效机制，用户代理应该尽最大努力传输数据，包括在存在暂时网络或服务器错误的情况下多次尝试传输数据，即使它使用POST传输数据，问题是请求仍然异步抛出，但在处理请求时不要求回调处理程序。请求由浏览器排队，并在可能的情况下发送。所以，我们能检查的最好的方法是请求是否成功排队？

我们应该知道，浏览器会多次尝试使用HTTP POST方法将数据异步传输到服务器。正如我们所知，POST方法是非幂等的，返利商城，即POST请求的结果如果发出n次，将不会在服务器上产生相同的资源状态。像GET、HEAD等请求方法是完全幂等的，因为它们总是导致服务器上资源的相同状态，而不管客户端访问它们的次数是多少。

可能需要注意确保使用sendBeacon API发送的数据不会破坏资源的状态服务器（如果多次发送）。