Angular 管道中的 http 缓存

Question

我正在尝试向我的服务中的 HTTP 请求添加一个简单的缓存系统。这是我的计划，但尚未成功。首先，调用服务，然后将响应存储到一个集合中，如数组或主题，如果下次调用服务而不是从服务器读取，请从存储该响应的数组或主题中读取它。我想在一个 PIPE 中使用此服务，其中 returns 来自对象的一个字符串。但是出于某种原因忽略了我的条件。

My Source Code

Answer 1

发生这种情况是因为您的 tap 包含所有缓存逻辑的逻辑是在响应到来后进行评估的，但是在您的应用程序中，您从一开始就进行了 4 次这样的方法调用。为了解决这个问题，我建议存储可观察对象，而不是它们的结果（因为您在调用时有可观察对象）并共享结果 shareReplay 可以使用运算符。

  readedPlatformsCache: Record<number, Observable<IPlatform>> = {};

  getPlatforms(id: number): Observable<IPlatform> {
    const cachedPlatform = this.readedPlatformsCache[id];

    if (!cachedPlatform) {
      const request = this._http.get<any>('assets/platforms.json').pipe(
        tap(() => console.log('http called')),
        map((platforms: IPlatform[]) => platforms.find((p) => p.id === id)),
        shareReplay(1),
      );
      return this.readedPlatformsCache[id] = request;
    } else {
      return cachedPlatform;
    }
  }

Angular 管道中的 http 缓存

Angular http cache in pipe

caching

http

pipe

rxjs

angular