当仅预期1个HTTP请求时，Angular HttpClient发出多个HTTP请求

我期望只有一个http请求，但是在我的控制台中却收到多个http调用。我不确定原因。以下为易于阅读的缩写。

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

}

在我的控制台中



在我的网络中



是什么使HttpClient发出这么多的HTTP请求？当UserDataService显然只执行一次时...

最佳答案

每个异步管道都会为可观察对象创建自己的订阅，该订阅以单独的API调用结束。您有两种选择来解决它。

选项1:
与as运算符一起使用来保存结果，如下所示:

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

选项2:
与rxjs中的share运算符一起使用:

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

关于当仅预期1个HTTP请求时，Angular HttpClient发出多个HTTP请求，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50983867/