CODEWITHSUNDEEP
javascriptangularjs
devdropper87
devdropper87

Reputation: 4187

how to avoid race condition with $http promises angular 1.5

I have a situation where I don't want one promise to complete until the other one (or potentially a few others) are complete. in this scenario, I have different payment options, and each time the user clicks a button, a payment is made... while the payments are made the user can also click delete. this is leading to weird race conditions where the delete is processed before the pay finishes. I don't want the delete to process/hit the database until the pay actions are complete. Here is the relevant code: 

 $ctrl.deletePayment = function(paymentRecord) {
  PaymentsService.deletePaymentRequest($ctrl.paymentRecord.id, paymentRecord)
    .then(updateTotal)
    .catch(updateTotal);
}

$ctrl.payOff = function(dataItem) {
  let payOffRecords = dataItem.payoffRecords;
  PaymentsService.submitPaymentRequestViaPatch($ctrl.temporaryPaymentAdvice.id, payOffRecords)
    .then(updateTotal)
    .catch(updateTotal);
}

$ctrl.payAllInView = function(payOff) {
  let paymentRecords = dataSource.map((rowItem) => {
    return rowItem.payoffRecords;
  });
  if (paymentRecords.length > 0) {
    PaymentsService.submitPaymentRequestViaPatch($ctrl.temporaryPaymentAdvice.id, paymentRecords)
      .then(updateTotal)
      .catch(updateTotal);
  }
}

how can I prevent deletePayment from processing before until a payment action is complete? I was thinking of having a modal show up to block the UI, but was also wondering if there was an angular way to handle this async/race condition.

Upvotes: 0

Views: 340

Answers (1)

user1346902
user1346902

Reputation:

You probably want to store the promise for reference and use $q.all(...) to ensure everything is complete before continuing. Something along the lines of:

let promises = [];
$ctrl.deletePayment = function(paymentRecord) {
  $q.all(promises).then((values) => {
    promises = [ PaymentsService.deletePaymentRequest(...)
      .then(updateTemporaryPaymentAdviceTotal)
      .catch(updateTemporaryPaymentAdviceTotal) ];
  });
}

...each method would need to add its promise to the promises array when called.

Upvotes: 3

Related Questions