当附加到卸载事件时，sendBeacon 请求卡为“（待处理）”答案

【问题标题】：sendBeacon request stuck as "(pending)" when attached to unload event当附加到卸载事件时，sendBeacon 请求卡为“（待处理）”
【发布时间】：2016-10-14 20:04:55
【问题描述】：

当我直接在控制台中调用 navigator.sendBeacon 时，我立即看到 Chrome 开发工具网络窗格中的请求成功完成。

当我使用如下代码将 sendBeacon 附加到 beforeunload 事件然后离开页面时，我看到一行添加到网络窗格，但其状态停留在“（待处理）”并且从不发送。

我做错了什么？

  window.addEventListener('beforeunload', function() {
    navigator.sendBeacon(
      'https://www.example.com/sendBeacon-data-collector',
      'Sent by a beacon!');
  }, false);

【问题讨论】：

对我来说同样的问题。你找到答案了吗？

标签： javascript

【解决方案1】：

您说连接卡在“待处理”状态并且永远不会发送。如果它没有发送，则连接根本不会显示在网络窗格中，因此这确认它确实确实发送了。

至于被困在“待定”的状态，这似乎是预期的行为（我仅通过观察凭经验建立的主张）。根据定义，sendBeacon 命令不期待答案，所以我认为浏览器不显示连接是否有效是正常的，因为它从未从服务器读取可能的回复（我的纯粹猜测）。

无论如何：我的网络应用程序中有一个 sendBeacon，它将最后的数据保存到数据库中，尽管处于“待定”状态，但它工作正常。因此，如果您的数据没有到达，问题可能出在其他地方。

例如，您需要确保以正确的格式发送数据。为了使其与从 HTML 表单读取数据的脚本兼容，不能简单地发送 JSON 字符串，而是需要将字符串放入 formdata 中（否则只能从服务器端的原始 post 数据中获取）

例子：

    var fd = new FormData();
    fd.append('data', JSON.stringify(beaconData));
    navigator.sendBeacon("inc/php/saveData.php", fd);

您还需要注意，sendBeacon 始终通过 POST 参数发送数据。如果你想使用 GET，你需要自己在 url 中添加数据。

【讨论】：

我不确定数据是否像你提到的那样发送，我有同样的问题，网络日志说：Method: POST; Status:(Pending);Size: 0B;Time Pending;Queued at 0;Started at 0;Conection Start: Stalled 我想这意味着连接永远不会启动。
在我的情况下它确实发送了：我让 PHP 脚本将数据写入文本文件，因此我可以验证它是否已被服务器接收。
可能是因为我在 angular4 SPA 上使用它吗？
不幸的是，我从未使用过任何版本的 Angular，所以我什至无法对此做出有根据的猜测。对不起。

【解决方案2】：

我遇到了同样的问题。我有一个用来收集请求记录的 Node/Express 服务器。我在没有数据的情况下进行测试。

数据可以作为 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 对象发送。所以，这不是问题。

问题出在我的服务器上。我使用app.get( ) 代替app.post( ) 来检查请求。

所有 sendBeacon 请求都通过 POST 发送。

它们将始终在 Chrome 开发工具网络选项卡中显示为待处理。他们总是会显示有一个 text/html 响应是空的。

sendBeacon 请求将通过 POST 发送。可以通过“unload”或“beforeunload”触发。

【讨论】：

您能否提供They will always appear as pending in the Chrome dev tools network tab. They will always show that there was a text/html response which is empty. 的来源。这大致就是其他答案所说的以及提供赏金的目的。
这是我在这个主题上做的教程 - youtube.com/watch?v=fmoolce6uDo
隐私设置不允许查看。
对不起。该视频定于周三发布。以为我上周发布了它。它解释了我上面所说的相同的事情，但更详细。这是规格。对于 sendBeacon - w3.org/TR/beacon/#sec-sendBeacon-method。在 NOTE 部分它说服务器不会提供响应。 “待处理”状态是 Chrome 显示的状态，表示请求已启动但尚未返回任何内容。

【解决方案3】：

AFAIK，当您触发 navigator.sendBeacon() 时，您不希望收到来自服务器的任何响应。您只需在页面完全卸载之前将浏览器发出的请求“排队”。

检查您的请求是否正确排队的一种方法是查看sendBeacon() 方法是否返回true 或false。如果true，则您的请求已正确排队，应保证由浏览器运行。如果false，那么它没有正确排队。有关详细信息，请参阅此MDN doc。

【讨论】：