处理javascript中的promise

Question

I am having trouble when using promise. my controller is

angular.module('shoppingPad').controller('customerCtrl', customerCtrl);
function customerCtrl($scope, customerService){

    $scope.addCustomer=function() {
        alert("inside add Customer function");
        var customer={
            name: $scope.name,
            number: $scope.number
        };
         customerService.addCustomer(customer).then(function(response){
          console.log(response);
         },
         function(error){
            console.log(error)
         });
}

this is my service

angular.module('shoppingPad').service('customerService', customerService);
function customerService($q, $http,restService) {
    //this is deferred object which will resolve or resolve the promise
    var deferred = $q.defer();
    //a function to add customer data to backend used service.it takes customer object as paramater.
    this.addCustomer = function(customer) {
  return restService.postRequest('customers/info',customer,function(response){
        deferred.resolve(response.data); 
       return deferred.promise;
    },
    function(error){
        deferred.reject(error);
        return deferred.promise;
    });
};

This is my restService.js

angular.module('shoppingPad').service('restService',restService);
function restService($http){
    //set port number and baseUrl here
    var port=3001;
    var baseUrl="http://localhost:"+port;

//generic getRequest function 


this.postRequest=function(url,data,successCallback,failureCallback){
    $http({
        method:'POST',
        url:baseUrl+"/"+url,
        data:data
    }).then(function(response){
        successCallback(response);
    },
    function(error){
        alert("internal server error");
        failureCallback(error);

    });

};//end of postRequest function
}//end of service

I am getting error in my controller as Error: customerService.addCustomer(...) is undefined. if Iam doing wrong please correct me with good code

Answer 1

The problem in your code is that you are not returning anything from your $http() call in this.postRequest() method.

Change your method as below:

 this.postRequest=function(url,data){
    return $http({
             method: 'POST',
             url: baseUrl+"/"+url,
             data: data
           });

 };

Don't pass success and error callbacks in this but just return the promise from this upstream method and handle the promise. Also, since every return of this promise will be a promise in itself you don't need to create a new promise using $q in your customerService . Just return the same promise from postRequest method as below:

this.addCustomer = function(customer) {
  return restService.postRequest('customers/info', customer);
}

This way you don't need additional unnecessary promises.

Now in your controller you can handle the returned promise as below:

$scope.addCustomer=function() {
  alert("inside add Customer function");
  var customer={
        name: $scope.name,
        number: $scope.number
  };

  customerService.addCustomer(customer)
   .then(function(response){
     console.log(response);
   })
   .catch(function(error){
     console.log(error)
   });
}

Also I have used .catch instead of passing the error callback as second parameter to .then because it has an added advantage of catch ing errors in the success callback along with any errors from returned promise