CODEWITHSUNDEEP
javascriptangularjspromise
lmcphers
lmcphers

Reputation: 468

Angular Promise Response Checking

I am doing some http calls in Angular and trying to call a different service function if an error occurs. However, regardless of my original service call function return, the promise it returns is always "undefined". Here is some code to give context:

  srvc.sendApplicantsToSR = function (applicant) {
    var applicantURL = {snip};

var promise = $http({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
    url: applicantURL,
    data: applicant
})
  .success(function (data) {
    return data;
  })
  .error(function (error) {
    return [];
  });

  return promise;
  };

Then, in the controller:

for (var applicant in $scope.applicants) {
            $scope.sendATSError($scope.sendApplicantsToSR($scope.applicants[applicant]), applicant);
       }

$scope.sendATSError = function (errorCheck, applicantNumber) {
      if (angular.isUndefined(errorCheck)) {
      console.log(errorCheck);
        AtsintegrationsService.applicantErrorHandling($scope.applicants[applicantNumber].dataset.atsApplicantID);
      }
    };

However, it is always sending errors because every response is undefined. How can I differentiate between the two returns properly? Thank you!

Upvotes: 1

Views: 367

Answers (3)

Roamer-1888
Roamer-1888

Reputation: 19288

As others have said, $http's .success() and .error() are deprecated in favour of .then().

But you don't actually need to chain .then() in .sendApplicantsToSR() as you don't need (ever) to process the successfully delivered data or to handle (at that point) the unsuccessful error. 

$scope.sendApplicantsToSR = function (applicant) {
    var applicantURL = {snip};
    return $http({
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        method: 'POST',
        url: applicantURL,
        data: applicant
    });
};

Now, in the caller (your line of code in the for loop), a promise is returned (not data) and that promise will, on settling, go down its success path or its error path. Exactly what happens on these paths is determined entirely by the callback functions you write in one or more chained .thens .

So what you need to write is a kind of inside-out version of what's in the question - with $scope.sendApplicantsToSR() on the outside and $scope.sendATSError() on the inside - and linked together with a .then().

for (var prop in $scope.applicants) {
    var applicant = $scope.applicants[prop];
    $scope.sendApplicantsToSR(applicant).then(null, $scope.sendATSError.bind(null, applicant));
}
// Above, `null` means do nothing on success, and 
// `function(e) {...}` causes the error to be handled appropriately. 
// This is the branching you seek!!

And by passing applicant, the error handler, $scope.sendATSError() will simplify to :

$scope.sendATSError = function (applicant) {
    return AtsintegrationsService.applicantErrorHandling(applicant.dataset.atsApplicantID); // `return` is potentially important.
};

The only other thing you might want to know is when all the promises have settled but that's best addressed in another question.

Upvotes: 2

Italo Ayres
Italo Ayres

Reputation: 2663

You should return your promisse to be handled by the controller itself.

Simplifying:

.factory('myFactory', function() {
    return $http.post(...);
})
.controller('ctrl', function(){
    myFactory()
        .success(function(data){
             // this is your data
        })
})

Working example: 

angular.module('myApp',[])
.factory('myName', function($q, $timeout) {
    return function() {
        var deferred = $q.defer();
        $timeout(function() {
            deferred.resolve('Foo');
        }, 2000);
        return deferred.promise;
    }
})
.controller('ctrl', function($scope, myName) {
    $scope.greeting = 'Waiting info.';
    myName().then(function(data) {
       	$scope.greeting = 'Hello '+data+'!';
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
    {{greeting}}!
</div>

Upvotes: 2

Jaromanda X
Jaromanda X

Reputation: 1

Looking at angular documentation, the sample code is

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

based on that - your first code snippet should be

 srvc.sendApplicantsToSR = function(applicant) {
     var applicantURL = {
         snip
     };

     return $http({
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
         },
         method: 'POST',
         url: applicantURL,
         data: applicant
     });
 };

Upvotes: 3

Related Questions