Http Promise not resolving in controller

Question

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.

Welcome to StackOveflow! Do you enter to `if` statement and get `ajaxPromise1 = ....` any value? Because from 1st look your factory seems valid — Maxim Shoustin, Jun 25 '14 at 11:07
@MaximShoustin, yes I do. The debug execution reaches upto ajaxPromise1.then( but does not proceed inside it. — Ganesh Chithambalam A.S., Jun 25 '14 at 11:12
I enter the factory. But I never reach deferred.resolve(data); — Ganesh Chithambalam A.S., Jun 25 '14 at 11:20
Did you try to set a breakpoint in the error callback inside the factory? Because on a first-look, looks like if you get inside the error callback, you're not resolving the deferred. You can either resolve the deferred with the error message or reject the promise with a reason. — António Sérgio Simões, Jun 25 '14 at 11:25
But didnt enter the error callback also. Am I missing something? — Ganesh Chithambalam A.S., Jun 25 '14 at 11:41
Just to clear out the waters...are you getting any error at the console? — António Sérgio Simões, Jun 25 '14 at 12:19

score 0 · Answer 1 · answered Jun 25 '14 at 11:31

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);

        });
    }
};

Check his comments in the original post. He's not reaching the error callback aswell. Also, if you'd read every comment you'd notice that what you've posted as an answer was already suggested. — António Sérgio Simões, Jun 25 '14 at 12:20

Http Promise not resolving in controller

1 Answers1

Linked