Angular：如何在服务组件内缓存 api 调用的响应？答案

【问题标题】：Angular: How to cache the response of an api call inside service component?Angular：如何在服务组件内缓存 api 调用的响应？
【发布时间】：2019-11-28 07:08:23
【问题描述】：

我想在服务组件中缓存 api 调用的响应，以便其他组件可以访问它来获取数据。怎么做？哪个概念最适合这个？

【问题讨论】：

您想在不同的组件之间共享 http 调用的响应（即一个 observable），对吗？你的用例是什么？对我来说，看起来你想要一个缓存。你可以实现自己的缓存逻辑（这需要很好的理解）或者你可以use ngx-cacheable
I googled this article for you

标签： angular api session-storage

【解决方案1】：

考虑通过添加服务将您的应用程序转换为渐进式 Web 应用程序 (PWA)。一个起点就是使用这个示意图。

ng add @angular/pwa

拥有 service worker 后，cli 将生成一个名为 ngsw-config.json 的文件。在这里，您可以缓存您的静态资产以及您在此处引用的 api 调用。要了解更多信息，请访问此网址。

https://angular.io/guide/service-worker-config

【讨论】：

【解决方案2】：

如果您出于性能原因想要缓存 GET 请求的响应，或者即使在离线时也能传递数据，那么正如 Dilshan 所说，您可以使用添加原理图添加 service worker 模块。

在这里full step by step demo 了解如何使用 Angular 创建 PWA。

然后在 ngsw-config.json 文件中，您将 API 请求定位到 dataGroups 数组中：

"dataGroups": [{
    "name": "jokes-cache",
    "urls": [ "https://icanhazdadjoke.com/" ],
    "cacheConfig": {
      "strategy": "performance",
      "maxSize": 5,
      "maxAge": "1d"
    }
  },
  {
    "name": "stocks-cache",
    "urls": [ "https://api.worldtradingdata.com/api/v1/stock" ],
    "cacheConfig": {
      "strategy": "freshness",
      "maxSize": 10,
      "maxAge": "1d",
      "timeout": "10s"
    }
  }]

但是如果你想存储一些数据并在其他组件之间共享，那么你可以使用RxJs ReplaySubject。下面的代码执行GET，然后在本地缓存结果。所以后面的调用不会触发新的请求，而是会返回缓存的数据。

    getUsers(reload: boolean = false): Observable<User[]> {
    if (!this.cache$ || reload) {
      if (!this.cache$) {
        this.cache$ = new ReplaySubject<User[]>(1);
      }

      this.getUsersFromServer()
        .pipe(
          map(result => result.map(f => new User(f)))
        )
        .subscribe(
          users => this.cachedInvoices$.next(users)
        );
    }

    return this.cache$.asObservable();
  }

【讨论】：