Question

I need to prevent multiple api calls to certain routes. I keep hearing that I should use shareReplay() to prevent multiple api calls especially when you are going between pages and coming back to the same page. I ve used shareReplay() but when I look at the network tab it keeps on making the network request. Any ideas? I ve made a stackblitz link here = https://stackblitz.com/edit/angular-ivy-jadosn

页: 1 法典:

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

这里是我的<条码>水。法典:

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

每当你进入“水 P”网页时,就会看到该网络的要求发生。

Answer 1

这不是观察工作如何。

让我解释一下(这将是漫长而有益的)。

观测站分为两类:HOT或COLD。

便携式防空洞察力可观测到的是,在不关闭的情况下,将具有持续的价值。想像一个活动听取者就超文本部分发言。

COLD观测站是一个可观测到的观测站,在发出第一次呼吁后完成。想像希望。

因此,使用<代码>http://get为COLD,而使用 CommonReplay为可观测成HOT

您在此做的是:

Go to the water page
Ask the service to fetch data from the API
Go to another page
Repeat

根据你目前的法典,所有服务机构都正在每当你称职(在这种情况下是无用的)时,就恢复一个可观察的无线电台。

你们想要做的是,通过计算结果,你不必每次打电话。

想法将是

// 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) {}
}

这样一来,在数据整理完成后,就只能再更新一次。该局是一个单一州(除别的以外),其案例甚至在你更换页(就是一个组成部分而言,在你路线上/离开时,就已经销毁和重新印制了。

然后,该构成部分只得在您的服务中获取经过翻新的数据,使您无法再向普遍定期审议机制发出呼吁。

友情链接