如何在 AngularJS 中在 onbeforeunload 上发送 HTTP 请求? [英] How to send an HTTP request onbeforeunload in AngularJS?

问题描述

我有一个简单的 angular 应用程序，它有两个使用 ngRoute 加载的视图.当用户在视图之间导航以及用户离开页面(刷新窗口、关闭选项卡或关闭浏览器)时，我需要在服务器上进行一些清理.

I have a simple angular app that has two views that are loaded using ngRoute. I need to do some clean up on the server when the user navigates between views and when the user leaves the page (refreshes window, closes tab, or closes browser).

我的第一站在这里:在 angularjs 中显示警报时用户离开页面.它解决了用户在视图之间导航的第一种情况.我是这样处理清理的:

My first stop was here: Showing alert in angularjs when user leaves a page. It solved the first case where the user navigates between views. I've handled the clean up like this:

$scope.$on('$locationChangeStart', function (event) {
    var answer = confirm("Are you sure you want to leave this page?")
    if (answer) {
        api.unlock($scope.id); //api is a service that I wrote. It uses angular $http service to handle communications and works in all other cases.
    } else {
        event.preventDefault();
    }
});

但是，我一直无法处理用户离开页面的情况.按照上述答案和此 Google 网上论坛帖子:https://groups.google.com/forum/#!topic/angular/-PfujIEdeCY 我试过了:

However, I haven't been able to handle the case where the user leaves the page. Following the above answer and this Google Groups post: https://groups.google.com/forum/#!topic/angular/-PfujIEdeCY I tried this:

window.onbeforeunload = function (event) {
    api.unlock($scope.id); //I don't necessarily need a confirmation dialogue, although that would be helpful. 
};

但是没有用.然后我在这里阅读:How to execute ajax function onbeforeunload?请求需要同步，在这里:如何使用 AngularJS 进行 $http 同步调用 Angular 不支持这个(虽然这个可能已经过时了).

But it did not work. Then I've read here: How to execute ajax function onbeforeunload? that the request needs to be synchronous and here: How to $http Synchronous call with AngularJS that Angular does not support this (although this one might be outdated).

我也试过直接调用 $http(没有服务)，但这也不起作用.在这一点上，我被困住了.任何建议/线索将不胜感激.

I've also tried calling $http directly (without the service) but that did not work either. At this point I'm stuck. Any suggestions / leads would be really appreciated.

提前致谢！

推荐答案

问题是 angular 总是使用 $http 服务进行异步调用(而且你不能改变这种行为).由于页面在 $http 服务有机会发出请求之前退出，因此您没有获得所需的结果.

The problem is that angular always make ASYNCHRONOUS calls with the $http service (and you can’t change that behavior). Since the page exits before the $http service have a chance to emit the requests you are not getting the desired result.

如果您想在不使用任何第三方库的情况下解决问题，请尝试以下代码:

If you want a workarround without using any third party libraries try the following code:

var onBeforeUnload = function () {

    var data = angular.toJson($scope.id...);//make sure you $scope is legal here...
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "apiURL/unlock", false);//the false is for making the call synchronous
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.setRequestHeader("Authorization", token);
    xmlhttp.send(data);
}

它会阻塞 UI，直到请求完成，所以尽量让服务器速度快，否则用户会注意到.

It will block UI until the request is completed, so try to make the server fast or the user will notice.

这篇关于如何在 AngularJS 中在 onbeforeunload 上发送 HTTP 请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！