JavaScript - 在选项卡关闭时发送 AJAX 调用（DELETE 请求）
JavaScript - send AJAX call on tab close (DELETE request)
我想在用户关闭选项卡时通过Javascript发送一个AJAXDELETE请求。流程如下：
当用户尝试关闭选项卡时，会发生 onbeforeunload 事件，然后如果用户确认离开页面，则会发生 onunload 事件并尝试执行 deleteRequest 函数，这是一个 synchronous ajax delete 请求。
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
window.onunload = function(){
deleteRequest();
};
function deleteRequest(){
let url = new URL("http://......");
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if(request.readyState == 4){
if(request.status === 200){
console.log('success');
}
}
}
request.open("DELETE", url, false);
try{
request.send();
}
catch(e){
console.log(e);
}
}
不幸的是，似乎 Google Chrome 不再支持这个，因为当一个选项卡关闭时它会杀死所有未决事件，并且在浏览器的控制台中我可以看到如下信息
DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://.....': Synchronous XHR in page dismissal. See https://www.chromestatus.com/feature/4664843055398912 for more details.
at deletRequest(.......js:411:17)
at window.onunload
请注意，我之前已经在 SO 上看到过很多关于这个问题的主题，但是解决方案并没有真正帮助，因为大多数都已经过时了，因为 chrome 关于这个问题的政策最近发生了变化，喜欢 this or this。
似乎大多数人都建议 navigator.sendBeacon 来实现这一点，但在文档中我只看到使用它来发出 POST 请求的方法，有什么想法吗？提前致谢。
就开箱即用的 sendBeacon 而言，您几乎是 SOL，因为 PUT 和 DELETE 无法像您观察到的那样发送（仅 POST).对于您的 XMLHttpRequest，Chrome 非常明确地说，"hey, we used to send these synchronous XHR requests in beforeunload if you used a , but we're not supporting that anymore":
Failed to execute 'send' on 'XMLHttpRequest' [...] Synchronous XHR in page dismissal.
Chrome 有意禁止这种行为。您别无选择，只能修改后端，即设置一个端点，该端点将接收 sendBeacon POST 请求，如 https://example.com/trigger-delete/ 并触发来自后端的 DELETE 调用，或者, 如果它不是你的服务器, 你实际上必须设置一个你控制的中继服务器来接收 POST (https://myrelay.com/forward-delete/) 然后将它作为 DELETE.
据我所知，sendBeacon 是您摆脱困境的唯一方法。
我想在用户关闭选项卡时通过Javascript发送一个AJAXDELETE请求。流程如下：
当用户尝试关闭选项卡时，会发生 onbeforeunload 事件，然后如果用户确认离开页面，则会发生 onunload 事件并尝试执行 deleteRequest 函数，这是一个 synchronous ajax delete 请求。
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
window.onunload = function(){
deleteRequest();
};
function deleteRequest(){
let url = new URL("http://......");
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if(request.readyState == 4){
if(request.status === 200){
console.log('success');
}
}
}
request.open("DELETE", url, false);
try{
request.send();
}
catch(e){
console.log(e);
}
}
不幸的是，似乎 Google Chrome 不再支持这个，因为当一个选项卡关闭时它会杀死所有未决事件，并且在浏览器的控制台中我可以看到如下信息
DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://.....': Synchronous XHR in page dismissal. See https://www.chromestatus.com/feature/4664843055398912 for more details. at deletRequest(.......js:411:17) at window.onunload
请注意，我之前已经在 SO 上看到过很多关于这个问题的主题，但是解决方案并没有真正帮助，因为大多数都已经过时了，因为 chrome 关于这个问题的政策最近发生了变化，喜欢 this or this。
似乎大多数人都建议 navigator.sendBeacon 来实现这一点，但在文档中我只看到使用它来发出 POST 请求的方法，有什么想法吗？提前致谢。
就开箱即用的 sendBeacon 而言，您几乎是 SOL，因为 PUT 和 DELETE 无法像您观察到的那样发送（仅 POST).对于您的 XMLHttpRequest，Chrome 非常明确地说，"hey, we used to send these synchronous XHR requests in beforeunload if you used a
Failed to execute 'send' on 'XMLHttpRequest' [...] Synchronous XHR in page dismissal.
Chrome 有意禁止这种行为。您别无选择，只能修改后端，即设置一个端点，该端点将接收 sendBeacon POST 请求，如 https://example.com/trigger-delete/ 并触发来自后端的 DELETE 调用，或者, 如果它不是你的服务器, 你实际上必须设置一个你控制的中继服务器来接收 POST (https://myrelay.com/forward-delete/) 然后将它作为 DELETE.
sendBeacon 是您摆脱困境的唯一方法。