管道中的角度 http 缓存答案

【问题标题】：Angular http cache in pipe管道中的角度 http 缓存
【发布时间】：2022-01-25 16:12:12
【问题描述】：

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

My Source Code

【问题讨论】：

标签： angular http caching rxjs pipe

【解决方案1】：

这是因为您的 tap 包含所有缓存逻辑的逻辑在响应到来后被评估，但在您的应用程序中，您从一开始就进行了 4 次这样的方法调用。为了解决这个问题，我建议存储 observables，而不是它们的结果（因为您在通话时拥有 observable）并共享结果 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;
    }
  }

【讨论】：

谢谢，这解决了我的问题。但我不明白我的代码不起作用的问题是什么。即使我在可观察到之前检查了 readedPlatforms，也没有发生任何事情并且未定义。另一个问题是不理解什么时候返回()，platform.pipe.ts文件甚至得到对象返回null到HTML模板并且不工作。
假设您的 API 需要一秒钟才能返回响应，我将尝试描述它在没有修复的情况下是如何工作的。你用 id 1 调用方法。它会立即检查项目1 是否被缓存。它不是。所以它提出了一个请求。再一次，使用 id 1 调用方法。它不在缓存中 - 已发出请求。 第二次通过....返回第一个请求。项目1 存储在缓存中。并且第二个请求也被返回，并且项目1在缓存中被完全相同的项目覆盖。通过将 observable 存储在缓存中，我们立即填充它，而不是在得到响应之后