Continue iterating only when all promises have been resolved

Question

Continue iterating only when all promises have been resolved

My AngularJS requirement involves the following:

 for (var i = 0, len = self.Scope.data.length; i < len; i++) 
{

         var data = self.Scope.data[i];
         var self = this;
//Executing First asynchronous function
self.EcritureService.createNewData(data).then(() => {
         })                                                     
//Executing Second asynchronous function
self.OperationService.getOperation(data.idOperation).then((operation) => {

         })   
//Executing Third asynchronous function
self.AccountService.getAccount(data.codeCompte).then((compte) => {
               currentAccount = compte;
               currentAccount.montant = currentAccount.montant+data.montant;
         })   
//Executing Fourth function depending on the third result to execute sequentially
self.AccountService.updateAccount(currentAccount).then(() => {
         })                    
}
// Once all promises from the fetch loop are resolved, I need to proceed with additional steps to update the operation fetched in the second function

I require the loop iterator to wait until all promises are resolved before proceeding to the next step and ensuring that all tasks are completed before moving to the final functionality outside the loop block.

javascript angularjs promise angular-promise

Answer 1

Answer №1

Generate arrays containing promises and utilize $q.all(promise_array) to execute when all promises are successfully resolved

// create an array of `$q.all()` promises
let promises = self.Scope.data.map((data) => {
  //First asynchronous function
  let promise_1 = self.EcritureService.createNewData(data).then(() => {})
  //Second asynchronous function
  let promise_2 = self.OperationService.getOperation(data.idOperation).then((operation) => {

  })
  //Third asynchronous function
  let promise_3 = self.AccountService.getAccount(data.codeCompte).then((compte) => {
    currentAccount = compte;
    currentAccount.montant = currentAccount.montant + data.montant;
    return currentAccount;
  }).then((currentAccount) => {
    //return promise of 4th inside `then()` of third
    return self.AccountService.updateAccount(currentAccount).then(() => {});
  });

  // this `$q.all()` resolves when this mapped instance of above all resolve
  return $q.all([promise_1, promise_2, promise_3]);

});

// resolves when all the loop instances of `$q.all()` resolve
$q.all(promises).then(()=>{
  // run completion code here
}).catch(err=>{
  console.log('Something failed in promise chain')
})

Answer 2

Generate arrays containing promises and utilize $q.all(promise_array) to execute when all promises are successfully resolved

// create an array of `$q.all()` promises
let promises = self.Scope.data.map((data) => {
  //First asynchronous function
  let promise_1 = self.EcritureService.createNewData(data).then(() => {})
  //Second asynchronous function
  let promise_2 = self.OperationService.getOperation(data.idOperation).then((operation) => {

  })
  //Third asynchronous function
  let promise_3 = self.AccountService.getAccount(data.codeCompte).then((compte) => {
    currentAccount = compte;
    currentAccount.montant = currentAccount.montant + data.montant;
    return currentAccount;
  }).then((currentAccount) => {
    //return promise of 4th inside `then()` of third
    return self.AccountService.updateAccount(currentAccount).then(() => {});
  });

  // this `$q.all()` resolves when this mapped instance of above all resolve
  return $q.all([promise_1, promise_2, promise_3]);

});

// resolves when all the loop instances of `$q.all()` resolve
$q.all(promises).then(()=>{
  // run completion code here
}).catch(err=>{
  console.log('Something failed in promise chain')
})

Answer 3

Answer №2

Initially, it's worth noting that transforming those services into promises may not be the ideal approach since you aim to avoid their inherent "promiseness." The most straightforward fix would involve revising the services to return values conventionally instead of via promises.

To address your inquiries, let's start with the latter part first. The simplest way to link the fourth promise to the third is by nesting it within the third .then block, as depicted below:

//Code for the third asynchronous function 
self.AccountService.getAccount(data.codeCompte).then((compte) => {
           currentAccount = compte;
           currentAccount.montant = currentAccount.montant+data.montant; 
           //The fourth function relies on the outcome of the third, so it should run sequentially
           self.AccountService.updateAccount(currentAccount).then(() => {
     })  
 })

If error handling is in place, you might consider placing the nested promise inside a .finally clause instead.

Regarding making the loop wait, standard for loops are not built for that purpose. To achieve this, you could create a custom loop and utilize $q.all to combine the promises. It would involve keeping track of a loop counter, incrementing it in the .then block of $q.all, and employing a recursive function that terminates once the necessary number of loops is completed.

Answer 4

Initially, it's worth noting that transforming those services into promises may not be the ideal approach since you aim to avoid their inherent "promiseness." The most straightforward fix would involve revising the services to return values conventionally instead of via promises.

To address your inquiries, let's start with the latter part first. The simplest way to link the fourth promise to the third is by nesting it within the third .then block, as depicted below:

//Code for the third asynchronous function 
self.AccountService.getAccount(data.codeCompte).then((compte) => {
           currentAccount = compte;
           currentAccount.montant = currentAccount.montant+data.montant; 
           //The fourth function relies on the outcome of the third, so it should run sequentially
           self.AccountService.updateAccount(currentAccount).then(() => {
     })  
 })

If error handling is in place, you might consider placing the nested promise inside a .finally clause instead.

Regarding making the loop wait, standard for loops are not built for that purpose. To achieve this, you could create a custom loop and utilize $q.all to combine the promises. It would involve keeping track of a loop counter, incrementing it in the .then block of $q.all, and employing a recursive function that terminates once the necessary number of loops is completed.

Continue iterating only when all promises have been resolved

Answer №1

Answer №2

Similar questions

Enhancing NodeJS performance when manipulating arrays

How to dynamically disable options in a Vuetify v-select based on the type of object value

Ways to retrieve an input field value without triggering form submission

What could be causing the shake effect on the MUI dialog to not work when clicking away?

Is it possible to retrieve a static resource within server-side code in NextJs?

Leveraging the power of Google Charts along with MySQL or

Setting up craco for jsx in your project

JavaScript encountering a NaN value

Utilize a jQuery class selector to retrieve the value of a textbox through HTMLHelper

What are some ways to conceal methods within a class so that they are not accessible outside of the constructor

Implementing a tooltip or bubble display functionality without using the span tag or title attribute

Node.js is facing a problem with its asynchronous functionality

When calling a function within a for loop, the function receives the final value instead of iterating through the sequence

Divide a string into smaller sections beginning at " ] " and concluding with "As"

Tips for validating email addresses and enforcing minimum length requirements

Angular promise fails to resolve after an extended period of waiting for a response

Using React for form validation

Animate the React Bootstrap modal only when it is shown or hidden

What is preventing me from accessing my session array in this.state.props from my mapStateToProps in React-Native Redux?

Is it possible to achieve a smooth transition to the right using CSS