Http服务缓存

use*_*993 4 caching http rxjs angular

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

我的代码在服务countriesService

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

在组件CountriesComponent中,我有

  ngOnInit() {
    this.countriesService.get()
      .subscribe(res => {
        this.countries = res.countries;
      });
  }
Run Code Online (Sandbox Code Playgroud)

我在路由配置中加载组件

const appRoutes: Routes = [
  { path: 'countries', component: CountriesComponent },
  { path: 'cities', component: CitiesComponent },
];
Run Code Online (Sandbox Code Playgroud)

每当我从城市返回国家时,我都会看到=>/countries的请求.它不应该激活请求,因为它应该被缓存(这是它在角度1.x中使用promises的工作方式),而不是角度4和rxJs.

Cha*_*oot 13

在您可以重新使用服务变量之后,您可以首次保存服务中的国家/地区.

 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();
        }
    }
Run Code Online (Sandbox Code Playgroud)