使用RXJS SharrePlay预防多个API调用

Question

我需要防止多个API调用某些路线。 我一直听到我应该使用shareReplay（）来防止多个API调用，尤其是在您在页面之间进入并返回同一页面时。我已经使用了shareReplay（），但是当我查看“网络”选项卡时，它会不断提出网络请求。有什么想法吗？我在这里做了一个stackblitz链接= https：//stackblitz.com/edit/ eedit/edit/angular-ivy/angular-ivy -jadosn

这是我的http.services代码：

getWaterPokemon(): Observable<Filter[]> {
        return this.http.get<Filter[]>(`${this.getApi()}/type/5`, { responseType: 'json' }).pipe(
            map((clients: any) => clients.pokemon.map((client: any) => client.pokemon)),
            shareReplay()
          );
    }

这是我的water.com.ponent代码：

ngOnInit(): void {
    this.waterPokemon$ = this.httpService.getWaterPokemon().pipe(
      shareReplay()
    );
  }

每次您输入Water Pokemon Page时，您都会看到网络请求发生。

Answer 1

这不是观察值的工作方式。

让我解释一下（这会很长，但有用）。

可观察到的是两种类型：热或冷。

可观察到的热可观察的可观察到，它在不关闭的情况下连续排放值。将其视为HTML元素上的活动听众。

可观察的可观察到的可观察到，它在第一次通话后就完成了。认为这是一个承诺。

因此，使用http.get是冷的，而在可观察到的shareReplay中，

您在这里做的很热，以下是：

• 转到“水页”，
• 请要求服务。从API获取数据
• 转到另一个页面
• 重复

您当前的代码，每次调用获取功能（在这种情况下是毫无用处）时，所有服务都在返回一个热观察。

您要做的就是存储获取结果，因此您不必每次都致电服务。

这个想法就是

// Service
class FetchService() {
  
  data = new BehaviorSubject<any[]>([]);
  data$ = this.data.asObservable();

  constructor(private http: HttpClient) {
    http.get('url').subscribe(res => this.data.next(res));
  }
}

// Component

class MyComponent {

  data$ = this.service.data$;

  constructor(private service: FetchService) {}
}

这样，服务仅在启动数据时才刷新一次。但是，由于该服务是单身人士（除非另有制作），因此即使您更改页面也不是这样的（对于组件而言不是这种情况），只要您进出它，它就会被销毁和重新创建）。

然后，该组件只需要在服务中获取记忆数据，从而阻止您的应用程序对API进行进一步的呼叫。