如何在AngularJS中發送HTTP請求onbeforeunload？

Question

我有一個簡單的角度應用程序，有兩個使用ngRoute加載的視圖。 當用戶在視圖之間導航以及用戶離開頁面時（刷新窗口，關閉選項卡或關閉瀏覽器），我需要在服務器上進行一些清理。

我的第一站就在這里： 當用戶離開頁面時在angularjs中顯示警報 。 它解決了用戶在視圖之間導航的第一種情況。 我已經像這樣處理了清理工作：

$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我試過這個：

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

但它沒有用。 然后我在這里讀到： 如何在onbeforeunload上執行ajax函數？ 請求需要同步，這里： 如何$ http與AngularJS同步調用 ，Angular不支持這個（雖然這可能已經過時）。

我也試過直接調用$ http（沒有服務），但這也不起作用。 此時我被困住了。 任何建議/線索將非常感激。

提前致謝！

Answer 1

問題是angular總是使用$ http服務進行ASYNCHRONOUS調用（並且你無法改變這種行為）。 由於頁面在$ http服務有機會發出請求之前退出，因此無法獲得所需的結果。

如果您想要一個不使用任何第三方庫的workarround，請嘗試以下代碼：

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直到請求完成，因此嘗試使服務器快速或用戶會注意到。

Answer 2

解決方法是調用$rootScope.$digest(); 在你的onbeforeunload回調中觸發$http調用之后。 原因是angular的$http方法將配置包裝在一個立即解決的promise中，這意味着ajax請求實際上不會被觸發，直到下一個tick。 其他瀏覽器在onbeforeunload tick之后似乎允許多一個tick，而不是IE11（我測試的IE的唯一版本）。 強制摘要周期避免了等到下一個滴答的需要。