AngularJS承诺链接$ q.all的最佳实践

时间:2018-05-31 10:46:31

标签: javascript angularjs angular-promise ecmascript-5

我是新手写作和使用承诺,我想要一些建议。我必须将我的承诺链接起来,因为某些功能只能在其他功能之后运行。我曾经习惯用很多回调函数来处理这个问题,这些函数看起来非常混乱和混乱。但随着我正在做的链接...它开始看起来有点凌乱,我想知道我是否正确地做到了这一点......

    function calcNetPriceSaleCharge(theItem) {
    var setInitialChargeAmount = miscSaleSvc.getInitialCharge(theItem);
    var setDiscountAmount = miscSaleSvc.getDiscountAmount(theItem);

    $q
        .all([setInitialChargeAmount, setDiscountAmount])
        .then(function(values) {
            theItem.initialchargeamount = values[0];
            theItem.initialdiscountamount = values[1];
        })
        .then(function() {
            var setActualCharge = miscSaleSvc.getActualCharge(theItem);
            var setVat = miscSaleSvc.setVat(theItem);
            $q
                .all([setActualCharge, setVat])
                .then(function(values) {
                    theItem.actualcharge = values[0];
                    theItem.vat = values[1];
                })
                .then(function() {
                    var setTotal = miscSaleSvc.getSaleTotal(theItem);

                    $q
                        .all([setTotal])
                        .then(function(values) {
                            theItem.total = values[0];
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                })
                .catch(function(error) {
                    console.log(error);
                });
        })
        .catch(function(error) {
            console.log(error);
        });
}

这确实有效,但我不确定我会以正确的方式进行此操作!正在调用的示例函数是......

srv.getInitialCharge = function(theItem) {
    //set up the deferred var
    var deferred = $q.defer();

    var initialchargeamount = parseFloat(theItem.normalperiodcharge * theItem.quantity);

    if (isNaN(initialchargeamount)) {
        deferred.reject("Error when calculating Initial Charge Amount.");
    } else {
        //set up the failed result
        deferred.resolve(initialchargeamount);
    }

    //return the promise
    return deferred.promise;
};

提前感谢您的帮助:)

2 个答案:

答案 0 :(得分:3)

你创造了一个小小的回调地狱,这正是Promises试图避免的。请记住,您还可以在then块中返回一个Promise,以便在同一个调用链中使用function calcNetPriceSaleCharge(theItem) { var setInitialChargeAmount = miscSaleSvc.getInitialCharge(theItem); var setDiscountAmount = miscSaleSvc.getDiscountAmount(theItem); $q.all([setInitialChargeAmount, setDiscountAmount]) .then(function(values) { theItem.initialchargeamount = values[0]; theItem.initialdiscountamount = values[1]; }) .then(function() { var setActualCharge = miscSaleSvc.getActualCharge(theItem); var setVat = miscSaleSvc.setVat(theItem); return $q.all([setActualCharge, setVat]); }) .then(function(values) { theItem.actualcharge = values[0]; theItem.vat = values[1]; }) .then(function() { var setTotal = miscSaleSvc.getSaleTotal(theItem); return $q.all([setTotal]); }) .then(function(values) { theItem.total = values[0]; }) .catch(function(error) { console.log(error); }); } 进一步处理:

function calcNetPriceSaleCharge(theItem) {
  var setInitialChargeAmount = miscSaleSvc.getInitialCharge(theItem);
  var setDiscountAmount = miscSaleSvc.getDiscountAmount(theItem);

  return $q
    .all([setInitialChargeAmount, setDiscountAmount])
    .then(function(values) {
      theItem.initialchargeamount = values[0];
      theItem.initialdiscountamount = values[1];
    })
    .then(function() {
      var setActualCharge = miscSaleSvc.getActualCharge(theItem);
      var setVat = miscSaleSvc.setVat(theItem);
      return $q.all([setActualCharge, setVat]);
    })
    .then(function(values) {
      theItem.actualcharge = values[0];
      theItem.vat = values[1];
    })
    .then(function() {
      var setTotal = miscSaleSvc.getSaleTotal(theItem);
      return $q.all([setTotal]);
    })
    .then(function(values) {
      return (theItem.total = values[0]);
    });
}

calcNetPriceSaleCharge(something)
  .then(function(finalValue) {
    console.log(finalValue);
  })
  .catch(function(error) {
    console.log(error);
  });

另一种变化:

char[] chars = "string".toCharArray();

Observable.range(0, chars.length).map(i -> chars[i]).subscribe(...)

答案 1 :(得分:1)

为了完整起见,使用async/await语法的版本(请注意,这可能是not be available for older browsers)。但是为了更好的可读性,应该更改变量命名。

async function calcNetPriceSaleCharge(theItem) {
  try {
    const setInitialChargeAmount = miscSaleSvc.getInitialCharge(theItem),
          setDiscountAmount = miscSaleSvc.getDiscountAmount(theItem);

    const values0 = await Promise.all( [setInitialChargeAmount, setDiscountAmount] );

    theItem.initialchargeamount = values0[0];
    theItem.initialdiscountamount = values0[1];

    const setActualCharge = miscSaleSvc.getActualCharge(theItem),
          setVat = miscSaleSvc.setVat(theItem);

    const values1 = await Promise.all( [setActualCharge, setVat] );

    theItem.actualcharge = values1[0];
    theItem.vat = values1[1];

    const values2 = await miscSaleSvc.getSaleTotal(theItem);

    theItem.total = values2;

  } catch ( e ) {
    console.log( e );
  }
}