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

Question

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

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

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

正如评论所建议的那样，在 shareReplay():

的帮助下，我最终缓存了 Observable 本身（而不是缓存结果）

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

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

How to prevent a resolver from calling the same multiple http get requests

angular

angular-resolver