angularjs 等待来自 $http 的响应

Question

我的问题是我的函数没有等待http请求的响应而走得更远。我知道我可以使用 promise 来等待，但我不明白这个概念。

我有一个包含所有 http 请求的数据服务：

function GetGroupIdFromBakery(bakeryId, successCallback, errorCallback) {
        $http.get(service.baseUrl + "BakeriesGroup/Bakeries/" + bakeryId)
            .then(function (result) { successCallback(result.data); }, errorCallback);
    }

从另一个服务，我调用数据服务：

var hasPermission = function (permission, params) {
            permissionRoute = permission;
            setIdEntity(params);
            for (var i = 0; i < permissions.length; i++) {
                if (permissionRoute.Name === permissions[i].Name) {
                    if (permissions[i].Scope == "System")
                        return true;
                    else if (permissions[i].Scope == permissionRoute.Scope && permissions[i].IdEntity == permissionRoute.IdEntity) 
                        return true;
                }
            }
            return false;
        }



var setIdEntity = function (params) {
            if (permissionRoute.Scope == "Bakery")
                permissionRoute.IdEntity = parseInt(params.bakeryId);
            else if (permissionRoute.Scope == "Group") {
                if (params.bakeriesGroupId)
                    permissionRoute.IdEntity = parseInt(params.bakeriesGroupId);
                else {
                    getGroupOfBakery(parseInt(params.bakeryId));   
                }

                console.log(permissionRoute.IdEntity);
            }
        }

var getGroupOfBakery = function (bakeryId) {
            DataService.GetGroupIdFromBakery(bakeryId, function (groupId) {
                permissionRoute.IdEntity = groupId;
            }, function (error) {
                console.error("something went wrong while getting bakery");
                alert("Une erreur s'est produite lors de la récupération de la boulangerie");
            });

        }

我必须等待 DataService.GetGroupIdFromBakery() 的响应。使用此代码，当我调用 getGroupByBakery() 时，permission.EntityId 未定义。

有人可以帮帮我吗？

Answer 1

您可以为响应数据添加观察者。我认为在您的情况下是EntityId。 它会在您的 EntityId 更改后立即执行。得到响应数据后就可以调用函数了，这次EntityId不会是undefined了。

$scope.$watch(function () {
            return EntityId  
        }, function (newEntityId) {
            if(newEntityId != undefined {
                // now you can call your function
             }
            }
        }, true);

Answer 2

没错，你必须使用 Promise，因为 $http 模块是异步的。我为此构建了一个服务：

.service('RequestService', function($q, $http){
  return {
    call: function(htmlOptions){
      var d = $q.defer();
      var promise = d.promise;
      $http(htmlOptions)
        .then(function(response){
          d.resolve(response.data);
         }, function(response){
          d.reject(response.data);
        });
      promise.success = function(fn) {
       promise.then(fn);
        return promise;
      };
      promise.error = function(fn) {
       promise.then(null, fn);
       return promise;
      };
      return promise;
    }
  }
})

然后：

RequestService.call({
   method: 'POST' //GET, DELETE ...
   data: data,
   url: 'http://someurl.com/'
  });

Answer 3

你应该使用延迟。 在GetGroupIdFromBakery方法中新建一个defer对象，成功部分解决defer，失败部分拒绝，最后返回defer的promise。

function GetGroupIdFromBakery(bakeryId, successCallback, errorCallback, $q) {
    var defer = $q.defer();
    $http.get(service.baseUrl + "BakeriesGroup/Bakeries/" + bakeryId)
        .then(function (result) { 
           successCallback(result.data);
              defer.resolve(result.data); 
           }, function(){
              defer.reject(); 
           });
   return defer.promise;
}

这成功地返回了一个承诺，您可以使用 .then() 调用并在需要获取 GetGroupIdFromBakery 数据的服务中作为值接收。

getGroupOfBakery(parseInt(params.bakeryId), $q).then(function(data){
    // here you have data
})

注意你应该注入 $q，这里我假设我们有 $q 在服务中，我将它传递给方法。