Http服务缓存

Question

我正在尝试在 Angular 应用程序中为 http 服务实现缓存。

我的服务代码 countriesService

  public get(): Observable<any> {
    return this.http.get(`/countries`, {})
      .map(res => res.json())
      .publishReplay(1)
      .refCount();
  }

在组件CountriesComponent中，我有

  ngOnInit() {
    this.countriesService.get()
      .subscribe(res => {
        this.countries = res.countries;
      });
  }

我正在路由配置中加载组件

const appRoutes: Routes = [
  { path: 'countries', component: CountriesComponent },
  { path: 'cities', component: CitiesComponent },
];

每次我从城市返回国家/地区时，都会看到对 => /国家的请求。它不应该触发请求，因为它应该被缓存（这就是它在 angular 1.x 中使用 promises 的工作方式），但不适用于 angular 4 和 rxJs。

Answer 1

您可以在第一次保存服务国家/地区之后，您可以重新使用服务变量。

 public get(): Observable<any> {

        if(this.countries != null) 
        {
            return Observable.of(this.countries );
        } 
        else 
        {
               return this.http.get(`/countries`, {})
               .map(res => res.json())
               .do(countries => this.countries = countries )
               .publishReplay(1)
                 .refCount();
        }
    }