需要在 Angularjs 应用程序中使用 Promise ($q) 处理会话超时

Question

我正在尝试将现有的 jquery Ajax 请求转换为使用 Angularjs Promises。我无法弄清楚如何在我的承诺中包含失败条件。除了其余的东西工作正常。

之前我有我的 jquery Ajax 调用，如下所示。在这里，当我在会话超时等情况下制作 Ajax 时，我使用了在 ajaxSissionTimeOutHandler() 中定义的获取警报消息。

function getUserList() {
    $.ajax({
        async: false,
        url: "oar3ajax.do",
        type: "POST",
        data: {
            action: 'getUserDetails',
             postMessage : parameterToSend,
            lanes : filterCrtArg.subs
        },
        dataType: "json"
    }).done(function(originalRequest) {
        var res = originalRequest;
        if (res == null) {
            alert("Sorry...There was an error retrieving the Data.");
        }
        if (res.ResultSet.status == 'failure') {
            alert(res.ResultSet.error);

        } else {
            /* Code to be Executed  */
        }
    }).fail(function(jqXHR, textStatus) {
        ajaxSissionTimeOutHandler();
    });
}

function ajaxSissionTimeOutHandler() {
    alert("You have been logged out due to inactivity");
    window.location = "/";
}

以下是我使用 Promises 转换后的代码：

在 services.js 中：

this.getUserDetails = function() {

        var originalRequest = $.ajax({
            async: false,
            url: "oar3ajax.do",
            type: "POST",
            data: {
                action: "getUserDetails"
            },
            dataType: "json"
        });

        return $q.when(originalRequest).then(function(res) {
            if (res.ResultSet.error) {
                return $q.reject(res.ResultSet.error);
            } else {
                return res.ResultSet.Response;

            }
        });

在 controller.js 中：

var userPromise = DataService.getUserDetails();
userPromise.then(function(data) {
    var indataToRefresh = data.tabDetails[0].columns;
}, function(error) {
    alert(error);
});

在这里，当我在会话超时等情况下进行 Ajax 调用时，我希望获得类似于 ajaxSissionTimeOutHandler() 中定义的警报消息。我该如何定义它？

Answer 1

首先，不要使用$.ajax，而是使用angular的$http。然后它看起来像这样（未经测试，但你应该明白）：

// earlier, include $http in your service function
// e.g. angular.module('yourModule'). service('yourService', function($http) {
// note that angular uses json by default
this.getUserDetails = function() {
  return $http.post('oar3ajax.do', {action: "getUserDetails"}).success(function(response) {
    // do something with your data
  }).error(function(error) {
    // do something with the error
  });
});

您的控制器可以是相同的。 $http 已经返回了一个承诺，所以你可以使用 return $http.post。如果你想处理你的数据，在你的控制器中解决承诺之前，你可以这样做：

// earlier, include $http and $q in your service function
// e.g. angular.module('yourModule'). service('yourService', function($http, $q) {
// note that angular uses json by default
this.getUserDetails = function() {
  var deferred = $q.defer();
  $http.post('oar3ajax.do', {action: "getUserDetails"}).success(function(response) {
    // do something with your data
    // then resolve
    deferred.resolve(response);
  }).error(function(error) {
    // do something with the error
    deferred.reject(response);
  });
  return deferred.promise;
});