Ignoring setTimeout() function within forEach() in Angular leads to issues

Question

Ignoring setTimeout() function within forEach() in Angular leads to issues

I am currently working on the frontend development of a Web Application using Angular. My task involves saving data from an array into a database by making repeated API calls until all the array data is processed. I implemented the use of setTimeout() in the code snippet below to ensure that each API call finishes processing an item from the array before moving on to the next. However, it seems like the setTimeout() function is not functioning as expected and I'm unsure why this is happening. Any suggestions or insights would be greatly appreciated. Thank you in advance!

this.userEntitiesRoles.forEach(newRole => {
            this.user.entity = newRole.entity;
            this.user.role = newRole.role;
            setTimeout(() => {
              this.usersService.addUser(this.user, this.lang).subscribe({
                next: (): void => {},
                error: (err): void => {
                  if(err.status != 401) {
                    var displayMessage = this.translate.instant('ERRORS.GENERAL_ERROR').toUpperCase().concat(' \r\n').concat(err.message);
                    this.notify.error(displayMessage);
                  }
                }
              });
            }, 1000);
});

addUser(user: IUser, lang: string): Observable<IUser> {
    let payload = new FormData();
    payload.append('emailID', `${user.email}`);
    return this.http.post<IUser>(`${environment.SERVER_ROOT}/add?lang=${lang}`, payload)
    .pipe(
      catchError(this.handleError)
    );
}

angular typescript

Answer 1

Answer №1

It has been observed that using setTimeout() within a loop does not result in sequential execution of calls.

Imagine the following scenario:

setTimeout(() => console.log('#1'), 1000);
setTimeout(() => console.log('#2'), 1000);
setTimeout(() => console.log('#3'), 1000);

In this case, all three statements will be executed after a 1000ms delay.

An alternative approach is to nest the timeouts like so:

setTimeout(() => { 
    console.log('#1'); 
    setTimeout(() => {
        console.log('#2');
        setTimeout(() => console.log('#3'), 1000);        
    }, 1000);
}, 1000);

However, this nesting method can be cumbersome and unwieldy.

The current method being used enforces a consistent 1000ms delay every time, regardless of actual API call times (resulting in unnecessary waiting) or delays longer than expected (leading to overlapping calls).

A more efficient approach would be to execute the calls consecutively as soon as they are finished.

This can be achieved using concat.

// Create an array of observable calls to 'addUser'
const roleUpdates = this.userEntitiesRoles.map(
  ({entity, role}) => this.usersService.addUser({ ...this.user, entity, role }, this.lang)
);

concat(...roleUpdates).subscribe({
  next: (): void => {},
  error: err => {
    if(err.status != 401) {
      const displayMessage = this.translate.instant('ERRORS.GENERAL_ERROR').toUpperCase().concat(' \r\n').concat(err.message);
      this.notify.error(displayMessage);
    }
  }
});

Answer 2

It has been observed that using setTimeout() within a loop does not result in sequential execution of calls.

Imagine the following scenario:

setTimeout(() => console.log('#1'), 1000);
setTimeout(() => console.log('#2'), 1000);
setTimeout(() => console.log('#3'), 1000);

In this case, all three statements will be executed after a 1000ms delay.

An alternative approach is to nest the timeouts like so:

setTimeout(() => { 
    console.log('#1'); 
    setTimeout(() => {
        console.log('#2');
        setTimeout(() => console.log('#3'), 1000);        
    }, 1000);
}, 1000);

However, this nesting method can be cumbersome and unwieldy.

The current method being used enforces a consistent 1000ms delay every time, regardless of actual API call times (resulting in unnecessary waiting) or delays longer than expected (leading to overlapping calls).

A more efficient approach would be to execute the calls consecutively as soon as they are finished.

This can be achieved using concat.

// Create an array of observable calls to 'addUser'
const roleUpdates = this.userEntitiesRoles.map(
  ({entity, role}) => this.usersService.addUser({ ...this.user, entity, role }, this.lang)
);

concat(...roleUpdates).subscribe({
  next: (): void => {},
  error: err => {
    if(err.status != 401) {
      const displayMessage = this.translate.instant('ERRORS.GENERAL_ERROR').toUpperCase().concat(' \r\n').concat(err.message);
      this.notify.error(displayMessage);
    }
  }
});

Answer 3

Answer №2

The reason why it is being overlooked is due to subscribing to an observable within the setTimeout function

To resolve this issue, consider utilizing promises. Modify your userService function responsible for adding a user to return a promise

addUser(user: IUser, lang: string): Promise<IUser> {
   let payload = new FormData();
    payload.append('emailID', `${user.email}`);
    return this.http.post<IUser>(`${environment.SERVER_ROOT}/add?lang=${lang}`)
    .toPromise()

}

Subsequently, implement async await to ensure each user addition operation is completed effectively

this.userEntitiesRoles.forEach(async newRole => {
     this.user.entity = newRole.entity;
     this.user.role = newRole.role;
     await this.usersService.addUser(this.user, this.lang)
});

Furthermore, enclose your code within a try-catch block to handle errors proficiently

this.userEntitiesRoles.forEach(async newRole => {
     this.user.entity = newRole.entity;
     this.user.role = newRole.role;
     try{
        await this.usersService.addUser(this.user, this.lang)
     }catch(err) {
         if(err.status != 401) {
            var displayMessage = this.translate.instant('ERRORS.GENERAL_ERROR').toUpperCase().concat(' \r\n').concat(err.message);
            this.notify.error(displayMessage);
          }
     }
});

Answer 4

The reason why it is being overlooked is due to subscribing to an observable within the setTimeout function

To resolve this issue, consider utilizing promises. Modify your userService function responsible for adding a user to return a promise

addUser(user: IUser, lang: string): Promise<IUser> {
   let payload = new FormData();
    payload.append('emailID', `${user.email}`);
    return this.http.post<IUser>(`${environment.SERVER_ROOT}/add?lang=${lang}`)
    .toPromise()

}

Subsequently, implement async await to ensure each user addition operation is completed effectively

this.userEntitiesRoles.forEach(async newRole => {
     this.user.entity = newRole.entity;
     this.user.role = newRole.role;
     await this.usersService.addUser(this.user, this.lang)
});

Furthermore, enclose your code within a try-catch block to handle errors proficiently

this.userEntitiesRoles.forEach(async newRole => {
     this.user.entity = newRole.entity;
     this.user.role = newRole.role;
     try{
        await this.usersService.addUser(this.user, this.lang)
     }catch(err) {
         if(err.status != 401) {
            var displayMessage = this.translate.instant('ERRORS.GENERAL_ERROR').toUpperCase().concat(' \r\n').concat(err.message);
            this.notify.error(displayMessage);
          }
     }
});

Answer 5

Answer №3

One alternative approach is to utilize rxjs concat for a more efficient solution. By creating an array of requests and subscribing to them simultaneously, concat guarantees sequential execution, waiting until the previous request is completed. Relying on timeouts can lead to issues, especially in slower connections where 1 second might not suffice.

import { concat } from 'rxjs';

const requests = [];
this.userEntitiesRoles.forEach(newRole => {
  requests.push(this.usersService.addUser(newRole.entity, newRole.role));
});

concat(requests).subscribe(
  res => {//...}, 
  err => {//..}
);

To learn more about this method, refer to concat documentation

Answer 6

One alternative approach is to utilize rxjs concat for a more efficient solution. By creating an array of requests and subscribing to them simultaneously, concat guarantees sequential execution, waiting until the previous request is completed. Relying on timeouts can lead to issues, especially in slower connections where 1 second might not suffice.

import { concat } from 'rxjs';

const requests = [];
this.userEntitiesRoles.forEach(newRole => {
  requests.push(this.usersService.addUser(newRole.entity, newRole.role));
});

concat(requests).subscribe(
  res => {//...}, 
  err => {//..}
);

To learn more about this method, refer to concat documentation

Ignoring setTimeout() function within forEach() in Angular leads to issues

Answer №1

Answer №2

Answer №3

Similar questions

Extracting Object Properties from Arrays in TypeScript

Steps for displaying detailed information about a single product on an Ecommerce page

Executing a method of another component in Angular2

The type 'MenuOptions[]' cannot be assigned to type 'empty[]'

Display the HTML tag inside a cell of a mat-table

The Next.js API has a mysterious parameter that remains undefined

Connecting to Multiple Databases in NestJS with MySQL Without Defining Entities

Leverage the retrieved configuration within the forRoot function

What is the best way to transfer a @ContentChild attribute to a fairy tale?

Develop a cutting-edge TypeScript library that allows for seamless resolution of optional dependencies by the application

Refining strings to enum keys in TypeScript

Error encountered when trying to update tree structure in TypeScript with new data due to incorrect array length validation

Angular application automatically adding 'localhost' before the backend API endpoint

Error: the variable is not defined in the "onclick" event

Utilize a dynamically defined union type to create a versatile callback function

What is the method to dynamically add an error to a FormGroup control using programming?

Typeorm stored procedure that returns a JSON response

Attempting to run the command "npx typescript --init" resulted in an error message stating "npm ERR! could not determine executable to run."

Challenges Faced with Implementing Active Reports in Angular 9

Angular Fusion: Delay execution of ngAfterViewInit until data is received from API call in ngOnInit