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

Question

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...

Answer 1

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();
    })
);

Answer 2

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);
}

Answer 3

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(...)