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

no such file exists in the directory

The formValidation, previously known as BootstrapValidator, is causing issues with my form submission via Ajax, despite my efforts to update the code to work with

Is JSON.stringify failing to function correctly in Mozilla Firefox?

AngularJS: incorporating various functionalities within a single controller

Is it necessary for React components to be organized in a hierarchy?

Leverage Express JS to prevent unauthorized requests from the Client Side

Triggering the onClick event in React to invoke another class components

Tips for enhancing the fluidity of animations after removing an item from a list

Tips for retrieving a flag when there is a preexisting record within an association in Sequelize

Error thrown when attempting to access properties of null values (Uncaught TypeError: Cannot read properties of undefined (reading 'map'))

Trigger .gif on hover using ng-repeat in AngularJS

Signaling an Event from a module in the node_modules directory to the Vue application

What is the best way to keep the heights of two divs in sync?

Is it possible to append an "index" to a database field using Express, Loopback, or NodeJS?

Tips for enhancing undo/redo functionality when working with canvas drawings in React

The arrangement of a table, an iframe, and another table being showcased in close proximity

Engage in a Play app featuring AngularJS frontend navigation

Creating a test suite with Jasmine for an Angular ui-grid component compiled without using $scope

Enhancing Angular's templates and handling cache invalidation

What is the best way to save high-resolution images created with HTML5 canvas?