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

Answer 1

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

Answer 2

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": ''
            }
        });
    };
}]);