Managing HTTP requests with errors within a forEach loop in Angular 9

Question

Managing HTTP requests with errors within a forEach loop in Angular 9

I am currently coding a script that iterates through an array to make HTTP requests.
Most of these requests are directed towards non-existent resources, but I do not have information on which ones specifically.
Here is the code snippet I am using:

    langs.forEach(lang => {
      this.http.get('assets/i18n/' + lang + '.json')
        .pipe(
          tap(data => console.log('server data:', data)),
          catchError(this.handleError),
        );
    });

Despite the code above, I am not seeing any output in the console, although I should be expecting some data structures.
What I do not want to see are error messages like:

GET http://localhost: 4205/assets/i18n/[...] 404 (Not Found)

, rather just the successful outcomes of the calls.
I am interested in finding out how to filter out errors and only retrieve valid data structures within a loop.
Thank you for your help.

UPDATE:

The method this.handleError is sourced from the Angular documentation:

private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message

    return throwError(
      'Something bad happened; please try again later.');
}

angular typescript angular9

Answer 1

Answer №1

If you find yourself needing to execute multiple calls within a loop, my suggestion is to utilize the ForkJoin rxjs operator. Not only does it provide a more polished solution, but it also enhances performance by making all the calls simultaneously.

const requests = [];
languages.forEach(language => requests.push(this.http.get('assets/i18n/' + language + '.json')));
Observable.forkJoin(requests).pipe(catchError(this.handleError)).subscribe(results => {...});

Answer 2

If you find yourself needing to execute multiple calls within a loop, my suggestion is to utilize the ForkJoin rxjs operator. Not only does it provide a more polished solution, but it also enhances performance by making all the calls simultaneously.

const requests = [];
languages.forEach(language => requests.push(this.http.get('assets/i18n/' + language + '.json')));
Observable.forkJoin(requests).pipe(catchError(this.handleError)).subscribe(results => {...});

Answer 3

Answer №2

To efficiently handle multiple HTTP requests in parallel, I suggest utilizing the forkJoin method. If there is a need to manage errors on individual requests while still capturing responses from others, error handling can be implemented for each request separately.

Here is an example implementation in the service.ts file:

getLanguages(): Observable<any[]> {
  const observables = langs.map(lang => {
    return this.http.get(`assets/i18n/${lang}.json`).pipe(
      catchError(() => of(null))
    );
  });

  return forkJoin(observables).pipe(
    // filtering out empty values from the array
    map(results => results.filter(x => !!x)),
  );
}

Once the service is set up as shown above, you can inject it into your component and subscribe to the getLanguages() function like this:

Here is how it can be done in the component.ts file:

ngOnInit() {
  this.service.getLanguages().subscribe(responses => {
    console.log(responses); // [ {}, {}, {}, ... ]
  });
}

Answer 4

To efficiently handle multiple HTTP requests in parallel, I suggest utilizing the forkJoin method. If there is a need to manage errors on individual requests while still capturing responses from others, error handling can be implemented for each request separately.

Here is an example implementation in the service.ts file:

getLanguages(): Observable<any[]> {
  const observables = langs.map(lang => {
    return this.http.get(`assets/i18n/${lang}.json`).pipe(
      catchError(() => of(null))
    );
  });

  return forkJoin(observables).pipe(
    // filtering out empty values from the array
    map(results => results.filter(x => !!x)),
  );
}

Once the service is set up as shown above, you can inject it into your component and subscribe to the getLanguages() function like this:

Here is how it can be done in the component.ts file:

ngOnInit() {
  this.service.getLanguages().subscribe(responses => {
    console.log(responses); // [ {}, {}, {}, ... ]
  });
}

Managing HTTP requests with errors within a forEach loop in Angular 9

Answer №1

Answer №2

Similar questions

What is the reason for the ngFor loop in Ionic 5 component not functioning properly?

The onRowSelect and onRowClick events are not being triggered on the Primeng table component in an Angular application

Revealing a single element in an Angular 6 application that is utilized by several modules

The type 'string | AddressInfo' does not include a 'port' property and does not have a string index signature

Determine the route parameter name based on the path string, for example, '/posts/:id'

Library for Nodejs that specializes in generating and converting PDF/A files

Can angularJS unit tests be executed using the angular-cli command `ng test`?

Execute environment validation on server during `next build` command

Tips for accessing the value stored within the parent element

Calling a function within another function is not allowed in Typescript

Production is experiencing a hiccup, however, the site is still up and running. There seems to be

Steps for sending HTTPS requests from Angular 6 to Node.js

What is the importance of having typings when using TypeScript?

Unit testing in Angular 2: Triggering hover events

Unleash the potential of a never-ending expansion for grid cells on Canvas

A more efficient approach to specifying types for the 'navigation' object in React Native's Stack Navigator

What is the best way to set up the parser and plugins using ESLint's updated flat configuration?

Showcasing a recently incorporated mat-card

Adaptively linking to the property of a deeply nested object

Encountering a bug in Angular 10 while attempting to assign a value from