angular - 如何防止解析器调用相同的多个 http get 请求

Question

我的应用程序有几个路由重定向，每个重定向都会触发FooResolverService，并且每个解析调用都会调用http get 方法FooService的GetFoos方法（因此我的资源 api 被同一个请求多次请求）。

如何只允许第一次调用通过resolve实际调用资源 api FooService？

export class FooResolverService implements Resolve<FooModel[]> {
  constructor(    
    private fooService: FooService
  ) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    console.log("resolve");
    return this.fooService.getFoos();
  }
}

FooService：

getFoos() : FooModel[] {        
    if (this.foos.length === 0) {
        this._foosAPIService.fetchFoos().subscribe(foos => 
        {
            this.setFoos(foos);
        });
    } 
    else {
        return this.foos;
    }
}

setFoos(foos: FooModel[]) {
    this.foos = foos;
}

FoosAPIService

fetchFoos() : Observable<FooModel[]> {
    return this._httpClient
        .get<FooModel[]>(
            this._configService.resourceApiURI + 'foos/'      
        );
}

Routes

const routes: Routes = [  
  { path: '', component: FoosComponent, children: children},
  { path: ':id', component: FoosComponent, children: children, resolve: [FoosResolverService]}
];

Answer 1

正如评论所建议的，我最终在Observable以下帮助下缓存了自身（而不是缓存结果）shareReplay()：

FoosAPIService：

fetchFoos(filter: string) : Observable<EventFoo[]> {
    if (this.fetchFoos$[filter]) {
      return this.fetchFoos$[filter];
    }

    this.fetchFoos$[filter] = this._httpClient
      .get<FooModel[]>(
        this._configService.resourceApiURI + 'events/'
      )
      .pipe(
        shareReplay({ bufferSize: 1, refCount: true })
      );
    
    return this.fetchFoos$[filter];
}

Service：

fetchFoos(filter: string) : void {        
    this.foosSubscription = this._foosAPIService.fetchFoos(filter)
        .subscribe(foos => 
        {                
            this.setFoos(foos);
            this.foosSubscription.unsubscribe();
        });
}