带有传递参数的 Angular 承诺链答案

【问题标题】：Angular promise chaining with passed parameters带有传递参数的 Angular 承诺链
【发布时间】：2015-01-04 20:06:04
【问题描述】：

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

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

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

我认为我需要做这样的事情：

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

但我无法完全理解正确的语法。

【问题讨论】：

标签： javascript angularjs promise angular-promise

【解决方案1】：

如果您想链接异步调用，则返回一个 Promise（注意返回值）。该承诺的解析将作为参数传递给下一个 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);
     });
  }

【讨论】：

【解决方案2】：

每个promise 都会返回一个successHandler 和error handler。所以结构应该是这样的：

 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 团队）的说法）：

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

【讨论】：