javascript - 附加到卸载事件时，sendBeacon 请求卡在 "(pending)"

Question

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

当我使用类似下面的代码将 sendBeacon 附加到 beforeunload 事件，然后离开页面时，我看到网络 Pane 中添加了一行，但其状态停留在“(待定)”并且从未发送。

我做错了什么？

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

Answer 1

您说连接卡在“挂起”状态并且永远不会发送。如果它没有发送，则连接根本不会显示在网络 Pane 中，因此这证实它确实确实发送了。

至于停留在“待定”的状态似乎是预期的行为(我仅通过观察凭经验建立的声明)。根据定义，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 中添加数据。