AngularJS Promise鏈接$ q.all的最佳實踐

Question

我是寫作和使用諾言的新手，我想要一些建議。 我必須遵守諾言，因為某些功能只能在其他功能之后才能運行。 我曾經用很多回調函數來處理這個問題，這些函數看起來非常混亂和混亂。 但是我正在使用鏈接...它開始看起來又有點混亂了，我想知道我是否正確地執行了此操作...

    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

您創建了一個小的回調地獄，這正是Promises試圖避免的。 Remeber，你也可以內返回無極then塊來進一步處理它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);
  });

Answer 2

為了完整起見，使用async/await語法的版本（請注意，該版本可能不適用於較舊的瀏覽器 ）。 為了提高可讀性，應更改變量命名。

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