javascript - AngularJS Promise 链接 $q.all 的最佳实践

Question

我是编写和使用 promises 的新手，我需要一些建议。我必须遵守我的 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);
            $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;
};

在此先感谢您的帮助:)

Answer 1

您创建了一个回调 hell ，这正是 Promises 试图避免的。请记住，您还可以在 then block 中返回一个 Promise，以便在同一调用链中使用 then 进一步处理它:

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