Question

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

Answer 1

请考虑通过添加服务将您的应用程序转换为渐进式Web应用程序（PWA）。起点将是使用此原理图。

ng add @angular/pwa

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

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

Answer 2

如果出于性能原因要缓存GET请求的响应，或者即使在脱机时也要传递数据，则正如Dilshan所说，可以使用添加原理图来添加Service Worker模块。

这里有full step by step demo，以学习如何使用Angular创建PWA。

然后在ngsw-config.json文件中，将dataGroups数组中的API请求作为目标：

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

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

2 个答案: