Tips for managing numerous HTTP requests in Angular 6

Question

Tips for managing numerous HTTP requests in Angular 6

I have a method that is trying to chain together 3 requests like this:

showProfileDetails() {
  this.getUserInfo(this.currentUser.id).pipe(
    mergeMap(e =>
      this.getAccounts(this.currentUser.id)
    ),
    mergeMap(e =>
      this.getPayments(this.currentUser.id)
    )
  ).subscribe(data =>
    console.log('first attempt on observables: ', data)
  )
}

My goal is to fetch the data from each call sequentially, store it in a variable, and then display it on the web page. However, I am only getting the data from the last call, which also happens to return an error. How can I handle this error without interrupting the process? Thank you for your help, as I am new to Angular.

javascript angular typescript rxjs observable

Answer 1

Answer №1

If you want to efficiently handle multiple HTTP requests, consider using forkJoin in RxJs:

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/forkJoin';

fetchData(): Observable<any> {
  const userData = this.http.get(USER_ENDPOINT).map(res => res.json());
  const accountData = this.http.get(ACCOUNT_ENDPOINT).map(res => res.json());
  const paymentData = this.http.get(PAYMENT_ENDPOINT).map(res => res.json());

  return Observable.forkJoin([userData, accountData, paymentData])
     .map(data => {
        // data[0] => user
        // data[1] => account
        // data[2] => payment
     });
}

Answer 2

If you want to efficiently handle multiple HTTP requests, consider using forkJoin in RxJs:

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/forkJoin';

fetchData(): Observable<any> {
  const userData = this.http.get(USER_ENDPOINT).map(res => res.json());
  const accountData = this.http.get(ACCOUNT_ENDPOINT).map(res => res.json());
  const paymentData = this.http.get(PAYMENT_ENDPOINT).map(res => res.json());

  return Observable.forkJoin([userData, accountData, paymentData])
     .map(data => {
        // data[0] => user
        // data[1] => account
        // data[2] => payment
     });
}

Answer 3

Answer №2

Here's a StackBlitz I created for you to check out:

https://stackblitz.com/edit/angular-async-calls-httpclient

{View in Full Page}

The following files are worth checking:

services > http.service.ts {contains the method for making GET requests}
services > users.service.ts {contains other methods}
app.component.ts

In the app.component.ts file, within the ngOnInit function, there are asynchronous calls that assign values to variables, which can be logged or used in templates.

Answer 4

Here's a StackBlitz I created for you to check out:

https://stackblitz.com/edit/angular-async-calls-httpclient

{View in Full Page}

The following files are worth checking:

services > http.service.ts {contains the method for making GET requests}
services > users.service.ts {contains other methods}
app.component.ts

In the app.component.ts file, within the ngOnInit function, there are asynchronous calls that assign values to variables, which can be logged or used in templates.

Tips for managing numerous HTTP requests in Angular 6

Answer №1

Answer №2

Similar questions

Is it possible to refresh the JSViews data that is underneath using an onclick event?

What is the reason behind classList returning 'undefined' unless getElementById is explicitly used?

Limit function parameter types to object keys

Angular Ahead-of-Time (AOT) compilation causes multiple route definitions to be

Utilize Quasar CSS breakpoints within Vue expressions for responsive design

Exploring the power of TypeScript for authenticating sessions with NextJS

What is the process for sending a request to Electron from my backend using NAPI?

Oops! Looks like we encountered a problem: "Uncaught ReferenceError: process is not

Learn how to incorporate additional rows into a table by pressing the plus button within the table with the help of Angular

Show information upon opening

Resolve the issue of autofill data overlapping with field labels

Exploring nested components traversal in React

Angular service designed for distributing a collection of data across nested levels

Differences Between DOM and Refs in React

Tips on obtaining the element's ID as a function parameter

Remove click event listeners from a specific element within a group of selected elements using D3

I am having difficulty retrieving the user's IP address in VueJs

An unexpected error has occurred in the browser console: The character '@' is not valid

Essential parameters needed in a Typescript function signature

Obtaining the value of SCOPE_IDENTITY to be used in an Angular application