Angular HttpClient makes multiple http request when only 1 http request is expected

angular multiple http requests
angular chain http requests
angular wait for multiple observables
forkjoin angular
angular 4 http wait for response
angular queue http requests
how to call multiple api in angular
angular subscribe to multiple observables

I am expecting only one http request but in my console I am getting multiple http calls. I am not entirely sure the reason. Below is a abbreviated for ease of readability.

component.html

{{ (user | async).firstname }}  {{ (user | async).firstname }}

<ul>
  <li *ngFor="let profile of (user | async)?.profiles "> 
    <div>
        <p>{{ profile.profileType }}<span *ngIf="isStudent(profile.specialized)"> - {{ profile.specialized }}</span></p>
        <p>{{ profile.id }}</p>
    </div>

    <button class="btn btn-primary float-right" (click)="onGo(profile)">Go</button>
  </li>
</ul>

component.ts

private user: Observable<User>;

ngOnInit(){

   this.user = this.userDataService.fetchUserDetails(+params['id']);

}

UserDataService.ts

fetchUserDetails(id:number):Observable<User> {
console.log("calls 1 ?"); // this only gets called once!!!
return this.httpClient.get<User>(this.apiUrl + "/" + id)
  .pipe(
    tap((response) => {

      console.log(response); // this is executed multiple times!!!


      return response;
    }),
    catchError( (error) => {
      handleIt();
    })
  )

}

In my console

In my network

What is making HttpClient to make so many http requests? when the UserDataService clearly only been executed once...


Every async pipe creates its own subscription to the observable, which ends in seperate API calls. You've got two options to solve it.

Option 1: Work with the as operator to save the result like this:

<ng-container *ngIf="user | async as u">
 {{ u.firstname }}
 ...
</ng-container>

Option 2: Work with the share operator from rxjs:

return this.httpClient.get<User>(this.apiUrl + "/" + id)   .pipe(
  tap(console.log), // this is executed multiple times!!!
    share(),
    catchError( (error) => {
      handleIt();
    })
);

HttpClient with "pipe" sends multiple GET requests even if the first , More use of async pipe will affect the efficiency because it will subscribe to every async pipe. If we subscribe to the multiple times to these observables, multiple HTTP requests will be triggered (see this post for more details). This particular type of Observables are the single-value streams: If an HTTP request is successful, these observables will emit only one value and then complete.


More use of async pipe will affect the efficiency because it will subscribe to every async pipe. You can notice this more if you are calling an HTTP service because it will call the HTTP request for each async pipe.

{{ user.firstname }}  {{ user.firstname }}

<ul>
  <li *ngFor="let profile of user?.profiles "> 
    <div>
        <p>{{ profile.profileType }}<span *ngIf="isStudent(profile.specialized)"> - {{ profile.specialized }}</span></p>
        <p>{{ profile.id }}</p>
    </div>

    <button class="btn btn-primary float-right" (click)="onGo(profile)">Go</button>
  </li>
</ul>


ngOnInit() {
    this.userDataService.fetchUserDetails(+params['id']).subscribe(data => this.user = data);
}

Communicating with backend services using HTTP, I am trying to send a HTTP GET request from Angular app to API. By some reason NgRx treats preflight OPTIONS request as failed GET request and makes a retry. I expect that NgRx sends only one single GET request. pipe sends multiple requests even if the first one did not fail HttpClient with "pipe"  The multiple versions of the Angular HTTP module all have an RxJS Observable-based API. This means that the multiple calls to the HTTP module will all return an observable, that we need to subscribe to one way or the other. Here are some key things to bear in mind regarding this particular type of Observables returned by the HTTP module:


You use the async pipe :

{{ (user | async).firstname }}  {{ (user | async).firstname }}

This means that Angular runs the call everytime it performs a change detection, opposed to an ngOninit function which is ran only once.

If you want to cancel that, you can use distinctUntilChanged() like this :

return this.httpClient.get<User>(this.apiUrl + "/" + id)
  .pipe(distinctUntilChanged())
  .map(...)

Performing multiple HTTP requests in Angular with forkJoin, Modern browsers support two different APIs for making HTTP requests: the The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications app/config/config.component.ts (showConfig v.1) you must explicitly convert the Object you get from the JSON to the required response type. A typical pattern we run into with single page apps is to gather up data from multiple API endpoints and then display the gathered data to the user. Fetching numerous asynchronous requests and managing them can be tricky but with the Angular’s Http service and a little help from the included RxJS library, it can be accomplished in just a few


Angular HTTP Client - QuickStart Guide, There are use cases where you need to make multiple HTTP requests (to same or Jun 20, 2018 · 1 min read The above example shows making three HTTP calls, but in a similar way, you can request as many HTTP calls as required. @jonrsharpe yes it is what you do, its the Accept header, unless he means what the angular http response type is, in which case it is already set to an array of Sub – mast3rd3mon Aug 6 '18 at 15:18 @mast3rd3mon I think you misunderstand the question, I'd suggest also reading the docs I just linked. – jonrsharpe Aug 6 '18 at 15:19


Testing HTTP requests in Angular has never been easier, This post will be a quick practical guide for the Angular HTTP Client module. results of two requests made in sequence; HTTP error handling; HTTP Interceptors The multiple versions of the Angular HTTP module all have an RxJS If the HTTP request is successful, these observables will emit only one  Angular 4.3 HttpClient (Accessing REST Web Services With Angular) The new HttpClient service is included in HttpClientModule and can be used to initiate HTTP request and process responses


Testing HTTP Requests in Angular has Never Been Easier, When Angular has finally come out, it was possible to test HTTP requests, but it was a tedious work to set Multiple dependencies were needed during the module setup and the faked… Every request made with the HttpClientModule returns an Observable. In this example only one request is expected with an exact url. In order to prevent collisions in environments where multiple Angular apps share the same domain or subdomain, give each application a unique cookie name. HttpClient supports only the client half of the XSRF protection scheme. Your backend service must be configured to set the cookie for your page,