即使REST api被缓存，数据也无法快速加载，即使api被缓存也需要花费相同的时间

Question

https://stackblitz.com/edit/angular-ofvnz3 检查以查看代码

我已经使用rxjs Observable缓存了REST api，但是仍然需要太多时间才能将数据加载到应用程序中。

与直接REST api调用花费的时间相同。

服务存储在bankhttp.service.ts中，组件home.component.ts使用此服务

Answer 1

在此代码中，您将缓存的数据存储在服务内部的变量中。这里发生的是，如果刷新应用程序，则该变量将重新初始化。为了即使在浏览器刷新后也能保留以前的数据，您必须将它们存储在本地存储中。然后您的getBankBranches函数将如下所示，

public getBankBranches():  Observable<any> {
   const banksFromCache = localStorage.getItem(this.baseUrl+'?city='+this.myCity);
   if(banksFromCache){
      return of(banksFromCache);
    }else {
        const response = this._http.get<any>(this.baseUrl+'?city='+this.myCity).pipe(
            publishReplay(1), // this tells Rx to cache the latest emitted
            refCount() // and this tells Rx to keep the Observable alive as long as there are any Subscribers
        );
        response.subscribe(banks => localStorage.setItem(this.baseUrl+'?city='+this.myCity, banks));
        return response;
    }
}