Tracking Web App Page关闭，AJAX请求已取消

Question

我有一些网络应用。它是基于桌面的。在保存数据之前，我遇到了一个操作被取消的问题。我在javascript中使用了一个unload事件来向mixpanel发送一些数据(只是一些ajax调用)。问题是，我相信这个请求有时会被“取消”。

有没有一种方法可以防止页面更改，直到我到达回调？我觉得答案是否定的，除非我能够同步调用。我不认为我在mixpanel上有这样的能力。

我目前正在使用mootools中的unload事件。我可能应该在卸载前使用beforeunload？有没有办法告诉unload我已经做完了？

Answer 1

简短的回答是否定的。同步ajax似乎是这里唯一可靠的选择。

如果您正在控制客户端代码，则很容易使其同步。只需在Request选项中添加async: false即可。服务器不会在意的。

对于我们这些习惯于编写异步ajax的人来说，一个潜在的陷阱是:在onComplete处理程序完成之前，Request.send()调用之后不会执行任何东西。这意味着诸如显示“请稍候...”之类的详细信息必须首先出现在代码中。对于异步请求，顺序显然无关紧要，通常会先发送请求。

至于beforeunload，它在这里可能没有什么用处。beforeunload的值是允许用户取消即将到来的页面加载。如果您不需要此功能，请使用unload。

Answer 2

有一种使用navigator.sendBeacon的较新方法。下面的代码设置了一个mixpanel事件，用于从页面导航离开。

var props = {};
document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
        mixpanel.track('Page closed', props, {transport: 'sendBeacon'});
    }
});

从2020年1月开始，在mixpanel js中可以使用{transport: 'sendBeacon'}作为discussed in this github issue。在那个讨论中有(建议的，在实现之前)代码片段，但我认为它应该是“在卸载之前”而不是“卸载”。然后我发现..。

developer.mozilla.org documentation on navigator.sendbeacon includes a very relevant section建议使用"visibilitychange“而不是"unload”或"beforeunload“来实现此跟踪目的。即使用户切换到不同的选项卡(并非完全“关闭”页面)，也会触发此事件。可能不是预期的)，但如果移动浏览器用户打开一个不同的应用程序(可能是预期的，因为这几乎是您在移动设备上“关闭”页面的主要方式)，它也会触发。