如何在AngularJs中使用$q进行多回调

Question

我使用下面的代码是为了简化后端请求，但我没有抓住如何调用成功方法或错误方法。

我怎样才能达到代码中注释的预期行为?

<>之前app.factory('REST'， function ($http， $q, sweetAlert) {返回{加载:函数(模块，动作，数据){Var deferred = $q.defer();Var promise = deferred.promise;http美元. post ('/api/' +模块+ ' . php ?action = ' +行动,数据).success(function (data) {如果(data.error)｛sweetAlert.swal ({标题:"错误",文本:data.error,类型:"警告"}）;//这里我想调用。error(details)}其他的deferred.resolve (data.result);}）.错误(function () {//这里我想调用。error(details)}）;的承诺。成功= function(fn) {promise.then (fn);返回的诺言;}返回的诺言;}}；}）;之前

这是使用上面代码的代码:

$scope.login = function () {
    $scope.loading = true;
    var payload = {'credentials': $scope.logindata};
    REST.load('access', 'login', payload).success(function(data) {
        if(data.redirect)
            $state.go(data.redirect);
        $scope.loading = false;
    }).error(function(data) { //THIS SHOULD BE CALLED
        $scope.loading = false;
    });
}

Answer 1

首先，我强烈建议您不要将.success附加到您正在返回的承诺中。这不是承诺/a兼容的，它与.then(由$http实现)的细微差异导致了很多混乱。只返回一个纯承诺。

除此之外，还有几件事需要注意:

1)您不需要另一个$q.defer和deferred.resolve() -只需链到$http和return的原始承诺。(参见延迟反模式)

2)拒绝一个承诺——也就是说，导致.catch(而不是.error——见上面关于细微差别的细节)触发——你应该返回$q.reject()。

以上所有的结果如下:

app.factory('REST', function($http, $q, sweetAlert){
  return {
    load: function(module, action, data) {
      // this "return" returns the promise of $http.then
      return $http.post('/api/' + module + '.php?action=' + action, data)
        .then(function(response) {
          var data = response.data; // .then gets a response, unlike $http.success
          if (data.error) {
            sweetAlert.swal({
              title: "Error",
              text: data.error,
              type: "warning"
            });
            //HERE I WANT TO CALL .error(details)
            return $q.reject(data.error);
          }
          return data.result; // what you would have "resolved"
        });
    }
  };
})

然后，正如我上面所说的，使用.then/.catch，就像使用承诺一样:

$scope.login = function () {
    $scope.loading = true;
    var payload = {'credentials': $scope.logindata};
    REST.load('access', 'login', payload)
        .then(function(data) {
          if(data.redirect)
             $state.go(data.redirect);
          $scope.loading = false;
        })
        .catch(function(error) {
          $scope.loading = false;
        });
}

Answer 2

按如下方式更新代码

app.factory('REST', function ($http, $q, sweetAlert) {
   return {
       load: function (module, action, data) {
              var deferred = $q.defer();                  
                  $http.post('/api/'+module+'.php?action='+action, data)
                          .success(function (data) {
                              if(data.error)
                              {
                                  sweetAlert.swal({
                                      title: "Error",
                                      text: data.error,
                                      type: "warning"
                                  });     
                                 //HERE I WANT TO CALL .error(details)                                
                                 deferred.reject(data.error);
                              }
                              else{
                                deferred.resolve(data.result);
                              }
                         })
                         .error(function (error) {
                              //HERE I WANT TO CALL .error(details)
                              deferred.reject(error);   
                          });
               return defferred.promise;
          }
   };
});

for your controller

 $scope.login = function () {
     $scope.loading = true;
     var payload = {'credentials': $scope.logindata};
     REST.load('access', 'login', payload).then(
       function(data) {
         if(data.redirect)
             $state.go(data.redirect);
             $scope.loading = false;
       },
       function(error) {
          $scope.loading = false;
       });
   }