javascript - 在 JavaScript 中处理 Promise

Question

我在使用 Promise 时遇到了麻烦。我的 Controller 是

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

我的 Controller 中出现错误，如下所示错误:customerService.addCustomer(...) 未定义。如果我做错了，请用好的代码纠正我

Answer 1

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

按如下方式更改您的方法:

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

 };

不要在此传递成功和错误回调，而只是从该上游方法返回 promise 并处理 promise 。此外，由于此 Promise 的每次返回本身就是一个 Promise，因此您无需在 customerService 中使用 $q 创建新的 Promise。只需从 postRequest 方法返回相同的 promise ，如下所示:

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

这样您就不需要额外不必要的 promise 。

现在在您的 Controller 中，您可以按如下方式处理返回的 promise :

$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 的额外优势成功回调中的错误以及返回的 Promise 中的任何错误