管道中的角度 http 缓存

分享于2022年07月17日 angular caching http pipe rxjs 问答
【问题标题】:管道中的角度 http 缓存(Angular http cache in pipe)
【发布时间】:2022-01-25 16:12:12
【问题描述】:

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

My Source Code


【解决方案1】:

这是因为您的 tap 包含所有缓存逻辑的逻辑在响应到来后被评估,但在您的应用程序中,您从一开始就进行了 4 次这样的方法调用。为了解决这个问题,我建议存储 observables,而不是它们的结果(因为您在通话时拥有 observable)并共享结果 shareReplay 运算符可以使用。

  readedPlatformsCache: Record> = {};

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

    if (!cachedPlatform) {
      const request = this._http.get('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 存储在缓存中,我们立即填充它,而不是在得到响应之后