defer.promise returning same result in angularJS

Question

I have a Service which fetch the data from API.When I am trying to call this service. It's returning with same value.

appName.service('FetchCustomerDate', ['$http', '$q', function($http, $q) {
    var self = this;
    self.getCustomerData = function(token,name) {
        var deferred = $q.defer();
        return $http({
            method: 'GET',
            url: ,
            headers: {
                "Authorization": token,
                "x-xcmc-auth": ''
            }
        }).then(function(response) {
            deferred.resolve(response);
            return deferred.promise;
        }, function(response) {
            deferred.reject(response);
            return deferred.promise;
        });
    };
}]);

What does "same value" mean? Right now, the `return deferred.promise` lines do nothing; just return the `$http` promise. No need for the deferred. — Heretic Monkey, Mar 09 '17 at 19:04
Have you tried putting the `return deferred.promise;` line outside the success and failure functions of `.then()` ? — Jean-François Beaulieu, Mar 09 '17 at 20:12
@MikeMcCaughan same value means API respond is same as pervious API call. — Player, Mar 09 '17 at 21:04
@JFBeaulieu I have tried to put "return deferred.promise;" outside the success and failure of ".then()", but got the same result. — Player, Mar 09 '17 at 21:07

Andrea · Accepted Answer · 2017-03-10T10:11:59.053

I see a bit of confusion here. Let's try to clear it. If you want to use deferred object, you need to change your code a bit:

appName.service('FetchCustomerDate', ['$http', '$q', function ($http, $q) {
    var self = this;
    self.getCustomerData = function (token, name) {
        var deferred = $q.defer();
        $http({ // Do not return  here, you need to return the deferred.promise
            method: 'GET',
            url: '...some URL here...',
            headers: {
                "Authorization": token,
                "x-xcmc-auth": ''
            }
        }).then(function (response) {
            deferred.resolve(response); // It's correct, you are resolving the deferred promise here.
            // return deferred.promise; // You do not need to return the deferred.promise here.
        }, function (response) {
            deferred.reject(response); // It's correct, you are rejecting the deferred promise here.
            // return deferred.promise; // You do not need to return the deferred.promise here.
        });

        return deferred.promise; // The function must return the deferred.promise
    };
}]);

In detail, function getCustomerData must return the promise belonging to deferred object with return deferred.promise. Inside then() callback you simply resolve or reject deferred promise. You do not need to return the deferred.promise.

You can improve the code. The $http service returns a promise, and the value returned by then callbacks is wrapped by then method in a promise. Knowing that, you can remove the use of deferred object:

appName.service('FetchCustomerDate', ['$http', function ($http) {
    var self = this;
    self.getCustomerData = function (token, name) {
        return $http({ // Here, you need to return the promise returned by $http. Than promise will contain the response returned inside "then" callbacks.
            method: 'GET',
            url: '...some URL here...',
            headers: {
                "Authorization": token,
                "x-xcmc-auth": ''
            }
        }).then(function (response) {
            return response; // Simply return the response, it will be wrapped in a resolved promise by "then()"
        }, function (response) {
            return response; // Simply return the response, it will be wrapped in a rejected promise by "then()"
        });
    };
}]);

As you can see, the 2 then callbacks simply returns the response object, for this reason you can omit them:

appName.service('FetchCustomerDate', ['$http', function ($http) {
    var self = this;
    self.getCustomerData = function (token, name) {
        return $http({ // Here, you need to return the promise returned by $http. Than promise will contain the response form the GET call
            method: 'GET',
            url: '...some URL here...',
            headers: {
                "Authorization": token,
                "x-xcmc-auth": ''
            }
        });
    };
}]);

score 0 · Answer 2 · answered Mar 10 '17 at 15:34

Usually when you fetch data with the $httpservice, you want to obtain data from the response and affect it to the $scope for instance, or process it somehow. What are you trying to do? Please clarify your question.

Normally a fetch will look something like this:

appName.service('FetchCustomerDate', ['$http', '$q', function($http, $q) {
    var self = this;

    function notifyError(reason) {
      console.error(reason);
    }

    self.getCustomerData = function(token,name) {
        var deferred = $q.defer();
        return $http({
            method: 'GET',
            url: ,
            headers: {
                "Authorization": token,
                "x-xcmc-auth": ''
            }
        })
          .then(function onSuccess(response) {
            var cfg = response.data; // process data 
        })
          .then(function onSuccess(response) {
            // chained promises
        })
          .then(
            function onSuccess(res) {
              // ... this will trigger the chain reaction
              deferred.resolve(res);
            },
            function onFailure(reason) {
              notifyError(reason); // manage the error
              deferred.reject(reason);
            })
          ;
          return deferred.promise;
        }
    }]);

defer.promise returning same result in angularJS

2 Answers2