Angular 8 - How to properly await a promise's completion within a loop before moving on to the

Question

Angular 8 - How to properly await a promise's completion within a loop before moving on to the

I have a list that needs to be iterated through, with each iteration dependent on the completion of the previous one. Each iteration returns a promise.

Currently, my code processes the list quickly without waiting for the promises to resolve:

this.records.forEach(item => {
  this.myService.doFirstTask().then(res => {
    if (res) {
      this.myService.doSecondTask().then(res => {
        if (res) {
          // do something.
        }
      });
    }
  });
});

The issue is that I need to wait for myService.doSecondTask() to finish before moving to the next item in the list.

I understand that using an async function with await could solve this problem, but I'm unfamiliar with it.

Could someone please offer guidance on how to wait for a nested promise to resolve before iterating through the .forEach loop?

Should I use async-await in the .doSecondTask() function as the solution?

angular typescript promise

Answer 1

Answer №1

Since you are working in Angular, utilizing observables is recommended. If your service returns observables instead of promises as it should in Angular, you can utilize RxJs concatMap.

from(this.records).pipe(
  concatMap(record => this.myService.doFirstTask(record)),
  switchMap(resultOfDoFirstTask => this.myService.doSecondTask())
).subscribe(resultOfDoSecondTask => {
  // Executes once for each record
});

This method using RxJs is preferred over promises in Angular because of its integration with RxJs.

Here is a sample snippet to demonstrate the implementation.

const { of, from } = rxjs;
const { concatMap, switchMap, delay } = rxjs.operators;

const records = [1,2,3,4,5,6];

const myService = {
  doFirstTask: val => of(`${val}: from first task`).pipe(delay(500)),
  doSecondTask: val => of(`${val}: from second task`).pipe(delay(500)),
};

from(records).pipe(
  concatMap(record => myService.doFirstTask(record).pipe(
    switchMap(resultOfDoFirstTask => myService.doSecondTask(resultOfDoFirstTask))
  ))
).subscribe(resultOfDoSecondTask => {
  console.log(resultOfDoSecondTask);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.0/rxjs.umd.min.js"></script>

If you prefer not to update your services to return observables, you can wrap them in a from function to convert them into an observable from a promise.

from(this.myService.doSecondTask())

Answer 2

Since you are working in Angular, utilizing observables is recommended. If your service returns observables instead of promises as it should in Angular, you can utilize RxJs concatMap.

from(this.records).pipe(
  concatMap(record => this.myService.doFirstTask(record)),
  switchMap(resultOfDoFirstTask => this.myService.doSecondTask())
).subscribe(resultOfDoSecondTask => {
  // Executes once for each record
});

This method using RxJs is preferred over promises in Angular because of its integration with RxJs.

Here is a sample snippet to demonstrate the implementation.

const { of, from } = rxjs;
const { concatMap, switchMap, delay } = rxjs.operators;

const records = [1,2,3,4,5,6];

const myService = {
  doFirstTask: val => of(`${val}: from first task`).pipe(delay(500)),
  doSecondTask: val => of(`${val}: from second task`).pipe(delay(500)),
};

from(records).pipe(
  concatMap(record => myService.doFirstTask(record).pipe(
    switchMap(resultOfDoFirstTask => myService.doSecondTask(resultOfDoFirstTask))
  ))
).subscribe(resultOfDoSecondTask => {
  console.log(resultOfDoSecondTask);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.0/rxjs.umd.min.js"></script>

If you prefer not to update your services to return observables, you can wrap them in a from function to convert them into an observable from a promise.

from(this.myService.doSecondTask())

Angular 8 - How to properly await a promise's completion within a loop before moving on to the

Answer №1

Similar questions

Angular Bootstrap Datepicker provides us with a date object, but I need it in the Date format

The Angular service not only stores data but also handles HTTP requests internally

Is it considered valid in JavaScript or TypeScript to group values using (value1 || value2) for comparisons, and if it is, what is the reasoning behind

Issue detected in rxjs-compat operator's shareReplay file at line 2, column 10:

Exploring novel methods for managing CRUD components in Angular 2

Angular: Validation triggered following ngModelChange event

Is there a way for me to change the value and placeholder attributes on the Clerk's SignIn component?

Formik QR code reader button that triggers its own submission

RXJS Subject data remains stale upon page refresh

Obtain the query response time/duration using react-query

Typescript's dynamic React component and its conditional types

Change the router outlet to the currently selected tab

Utilizing an API to dynamically augment a JSON object with user input in Angular

Transforming the unmanaged value state of Select into a controlled one by altering the component

The Nest.js Inject decorator is not compatible with property-based injection

Remove a npm package from an angular application

Transitive dependency in Npm that is not up to date

Navigation problem in Angular: Page remains unchanged despite URL updating

Angular2 is designed to break down complex applications into smaller, more manageable parts

It takes two clicks for the text to change on the button in Angular