当多个 Angular 组件同时请求同一个对象时，如何使用 ngrx 最小化 XHR 请求？答案

【问题标题】：How do I minimize XHR requests with ngrx when the same object is requested concurrently by multiple Angular components?当多个 Angular 组件同时请求同一个对象时，如何使用 ngrx 最小化 XHR 请求？
【发布时间】：2021-11-21 08:17:25
【问题描述】：

假设我有一个显示项目列表的角度组件：

<app-item *ngFor="let item of items"></app-item>

假设item 看起来像这样：

interface Item {
  userId: number;
  name: string;
}

而ItemComponent 想要显示具有以下 HTML 的项目：

<p>{{username$ | async}} has item "{{item.name}}"</p>

在组件的打字稿文件中，这些是相关的部分：

@Input() item: Item;

username$: Observable<string>;

ngOnInit() {
  this.store.dispatch(new LoadUser({id: item.userId}));

  this.username$ = this.store$.select(selectUser, {id: item.userId}).pipe(
    filter(user => !!user),
    map(user => username)
  );
}

现在，如果我有很多来自同一个用户的项目，每次呈现 <app-item> 时，都会触发一个新的 API 调用来获取用户（通过调度的操作和相关效果，为简洁起见省略），即使用户已经在商店中。

为了避免这种情况，我修改了我的效果，首先检查商店中是否有用户，如果是，则返回，否则从 API 获取新用户。

但这仅适用于稍后发生的请求：在上述场景中，它们几乎都在同一时间开始（在第一个 API 请求返回值之前），因此它们都通过 API 运行。

我觉得这将是一个普遍的问题......处理它的正确方法是什么？

谢谢！

【问题讨论】：

检查this SO问题。

标签： angular ngrx

【解决方案1】：

Use the exhaustMap operator。当有一个待处理的请求时，这将取消传入的请求。

【讨论】：

【解决方案2】：

您可以尝试在进行 HTTP 调用的服务文件中使用 shareReplay()。这样，您就可以分享您的可观察响应。

import { shareReplay } from 'rxjs/operators';

export class AService {
  getUsers(id: number): Observable<SomeInterface> {
     return this.http.get<SomeInterface>(`url/${id}`).pipe( 
       shareReplay()
     )
  }
}

【讨论】：