Angular 使用传递参数的承诺链接

Question

在我的 Angular 应用程序中，我正在尝试调用一系列函数，每个函数 returning 一个值成为下一个函数的输入。从概念上讲，它是这样的：

$scope.createPanel = function() {
   var primer3_parameter_id = primer3FromDesignSetting($scope.selector.designSetting);
   var panel = getPanelData(primer3_parameter_id);

   Restangular.all('batches').post(panel).then(function(batch) {
      createBatchDetailRows(batch);   
   });
};

我发现这行不通，因为远程调用的异步性质：它们 return 是承诺而不是实际结果。

我想我需要做这样的事情：

$scope.createPanel = function() {
  primer3FromDesignSetting($scope.selector.designSetting)
     .then(getPanelData(primer3_parameter_id))
     .then(postPanel(panel))    // the Restangular call wrapped into a new function
     .then(createBatchDetailRows(batch))
     .catch(function(err) {
           // error handler
     }
 };

 function primer3FromDesignSetting(designSetting) {
     var primer3Parameter = _.clone(Restangular.stripRestangular(designSetting));
     primer3Parameter = _.omit(primer3Parameter,panelFields);
     delete primer3Parameter.id;
     Restangular.all('primer3_parameters').post(primer3Parameter).then(function(newPrimer3Parameter) 
     {
         return newPrimer3Parameter.id;
     }, function(error) {
         console.log(error);
     });
  }

$scope.createPanel();

但我不太了解正确的语法。

Answer 1

如果你想链接一个异步调用，然后 return 一个承诺（注意 return 值）。该承诺的解决方案将作为参数传递给下一个 then 处理程序（在本例中，它是 newPrimer3Parameter.id）：

 function primer3FromDesignSetting(designSetting) {
     var primer3Parameter = _.clone(Restangular.stripRestangular(designSetting));
     primer3Parameter = _.omit(primer3Parameter,panelFields);
     delete primer3Parameter.id;
     return Restangular.all('primer3_parameters').post(primer3Parameter).then(function(newPrimer3Parameter) 
     {
         return newPrimer3Parameter.id;
     }, function(error) {
         console.log(error);
     });
  }

Answer 2

每个承诺都会 return 一个 successHandler 和错误处理程序。所以结构应该是这样的：

 primer3FromDesignSetting($scope.selector.designSetting)//Asynchronous task that returns a promise
    .then(SuccessHandler1,ErrorHandler1) //Promise 1 - ErrorHandler optional
    .then(SuccessHandler2,ErrorHandler2) //Promise 2 - ErrorHandler optional
    .then(SuccessHandler3, ErrorHandler3) //Promise 3 - ErrorHandler optional

以下是承诺的运作方式（根据 google 员工 Shyam Sheshadri（前 google）和 Brad Green（Angular 团队）的说法）：

每个异步任务都会return一个promise对象。
每个promise对象都会有一个then函数，可以带两个参数，一个成功处理程序和错误处理程序。
then函数中的成功或错误处理函数只会被调用一次，之后异步任务完成。
then 函数也将 return 一个承诺，允许链接多个调用。
每个处理程序（成功或错误）都可以return一个值，该值将传递给下一个在承诺链中发挥作用。
如果处理程序 return 是一个承诺（发出另一个异步请求），那么下一个只有在该请求完成后才会调用处理程序（成功或错误）。

Angular 使用传递参数的承诺链接

Angular promise chaining with passed parameters

javascript

promise

angularjs

angular-promise