Question

我在使用诺言时遇到麻烦。我的控制器是

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

这是我的服务

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

这是我的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

我的控制器出错了错误：customerService.addCustomer（...）未定义。如果我做错了请用好的代码纠正我

Answer 1

您的代码中存在的问题是，您未使用$http()方法从this.postRequest()调用中返回任何内容。

更改您的方法如下：

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

 };

不要在此处传递成功和错误回调，但只需从此上游方法返回承诺并处理承诺。此外，由于此承诺的每次返回都将成为承诺本身，您不需要在$q中使用customerService创建新承诺。只需从postRequest方法返回相同的承诺，如下所示：

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

这样你就不需要额外的不必要的承诺了。

现在在您的控制器中，您可以处理返回的承诺，如下所示：

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

此外，我使用.catch而不是将错误回调作为第二个参数传递给.then，因为它在成功回调中具有 catch 错误的附加优势以及返回承诺中的任何错误

在javascript中处理promises

1 个答案: