Http Promise not resolving in controller

问题:

I am just beginning to learn AngularJS and have a problem understanding promises. I have factory which makes call to back-end server and returns a promise as follows:

    var commonModule = angular.module("CommonModule", [])
      .factory('AjaxFactory', function($http, $q, $dialogs, transformRequestAsFormPost) {
        return {
          post: function(reqUrl, formData) {
              var deferred = $q.defer();
              $http({
                  method: "post",
                  url: reqUrl,
                  transformRequest: transformRequestAsFormPost,
                  data: formData
              }).success(function(data) {
                  if (data['error']) {
                      if (data['message']) {
                          $dialogs.notify('Error', data['message']);
                      } else {

                      }
                  } else if (data['success']) {
                      if (data['message']) {
                          $dialogs.notify('Message', data['message']);
                      }
                  } else if (data['validation']) {
                  }
                  deferred.resolve(data);
              }).error(function(data) {
                  $dialogs.notify('Error', 'Unknown Error. Please contact administrator');
              });
              return deferred.promise;
          }
      };
  })
  .factory("transformRequestAsFormPost", function() {
      function transformRequest(data, getHeaders) {
          var headers = getHeaders();
          headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";
          return(serializeData(data));
      }
      return(transformRequest);

      function serializeData(data) {
          if (!angular.isObject(data)) {
              return((data === null) ? "" : data.toString());
          }
          var buffer = [];
          for (var name in data) {
              if (!data.hasOwnProperty(name)) {
                  continue;
              }
              var value = data[ name ];
              buffer.push(
                encodeURIComponent(name) +
                "=" +
                encodeURIComponent((value === null) ? "" : value)
                );
          }
          var source = buffer
            .join("&")
            .replace(/%20/g, "+")
            ;
          return(source);
      }
  }
  );

I have a controller which calls the AjaxFactory service using two functions as follows

marketingCampaignModule.controller('CampaignInfoController', ['$scope', 'AjaxFactory', '$state', 'campaign', function($scope, AjaxFactory, $state, campaign) {
        $scope.init = function() {
            $scope.name = campaign['name'];
            $scope.description = campaign['description'];
            console.log($scope.mcmcid);
            if ($scope.mcmcid > 0) {
                var inputData = {};
                inputData['mcmcid'] = $scope.mcmcid;
                var ajaxPromise1 = AjaxFactory.post('index.php/mcm/infosave/view', inputData);
                ajaxPromise1.then(function(data) {
                    if (data['success']) {
                        $scope.name = data['params']['name'];
                        $scope.description = data['params']['description'];
                    }
                },
                  function(data) {
                      if (data['success']) {
                          $scope.name = data['params']['name'];
                          $scope.description = data['params']['description'];
                      }
                  }
                );
            }
        };
        $scope.init();
        $scope.submitForm = function(isValid) {
            if (isValid) {
                var formData = $scope.prepareFormData();
                var ajaxPromise = AjaxFactory.post('index.php/mcm/infosave/save', formData);
                ajaxPromise.then(function(data) {
                    if (data['success']) {
                        $scope.setValues(data['params']);
                    } else if ('validation') {
                        $scope.handleServerValidationError(data['message']);
                    }
                });
            }
        };

        $scope.prepareFormData = function() {
            mcmcId = '';
            var formData = {};
            if ($scope.mcmcid > 0) {
                mcmcId = $scope.mcmcid;
            }
            formData["mcmcid"] = mcmcId;
            formData["name"] = $scope.name;
            formData["description"] = $scope.description;
            return formData;
        };

        $scope.setValues = function(data) {
            $scope.mcmcid = data['mcmcid'];
            $state.go('TabsView.Companies');
        };
        $scope.handleServerValidationError = function(validationMessages) {
            alert(validationMessages['name']);
        };

    }]);

The promise ajaxPromise gets resolved in the function $scope.submitform but not in $scope.init.

Please tell me what am I missing.

回答1:

add to your service deffere.reject() on error:

app.factory('AjaxFactory', function($http, $q, $dialogs, transformRequestAsFormPost) {
        return {
          post: function(reqUrl, formData) {
              var deferred = $q.defer();
              $http({
                  method: "post",
                  url: reqUrl,
                  transformRequest: transformRequestAsFormPost,
                  data: formData
              }).success(function(data) {
                  if (data['error']) {
                      if (data['message']) {
                          $dialogs.notify('Error', data['message']);
                      } else {

                      }
                  } else if (data['success']) {
                      if (data['message']) {
                          $dialogs.notify('Message', data['message']);
                      }
                  } else if (data['validation']) {
                  }
                  deferred.resolve(data);
              }).error(function(data) {
                  deferred.reject(data)
                  $dialogs.notify('Error', 'Unknown Error. Please contact administrator');
              });
              return deferred.promise;
          }
      };
  });

and in you controller handle error:

$scope.init = function () {
    $scope.name = campaign['name'];
    $scope.description = campaign['description'];
    console.log($scope.mcmcid);
    if ($scope.mcmcid > 0) {
        var inputData = {};
        inputData['mcmcid'] = $scope.mcmcid;
        var ajaxPromise1 = AjaxFactory.post('index.php/mcm/infosave/view', inputData);
        ajaxPromise1.then(function (data) {
            if (data['success']) {
                $scope.name = data['params']['name'];
                $scope.description = data['params']['description'];
            }
        },

        function (data) {
            if (data['success']) {
                $scope.name = data['params']['name'];
                $scope.description = data['params']['description'];
            }
        },
//on error
        function (data) {
            alert("error");
            console.log(data);

        });
    }
};