Angular / RxJS - don't repeat the same GET requests during application init

Question

Is there any operator in Angular or RxJS, that would replace several http requests into one, if they are called in short period of time?

---

F.e. when I open my application, all of my 20 components during ngOnInit are making the same http call:

I've created a cache based on Angular HttpInterceptor (f.e. https://blog.logrocket.com/caching-with-httpinterceptor-in-angular/), however because all those calls are performed upon initialization, the cache cannot be built quickly enough.

I could put all components into one parent, that would pass the data to children via Inputs, but I wanted to remain with the architecture, where component can initialize itself (they are reused in other places).

I tried to use RxJS share or share replay, but I'd like to stop sharing after f.e. 1 second. I'd love to put such operator in my service:

getData(): Observable<any> {
    return = this.http.get<any>('endpoint')
      .pipe(
        shareIfCalledWithin( 1000ms ),
      );

Answer 1

Parent component is to provide share data is a good idea.

Another general solution is maybe delegate the http call to a subject and fire the http call from this subject, subject trigger frequency can be controlled by debounceTime

const getData = new Subject()
getData.next()
    
const getDataStream = getData.pipe(debounceTime(1000),
switchMap(_ => this.http.get......),
share())
    
getDataStream.subscribe(data => you data...)

You can place this logic in a parent component or shared service.

Answer 2

I tend to think that the more logic you push in a service the better, and this case seems a good candidate for this approach.

More specifically, as @Fan Cheung has already suggested, I would create a service (shared via Dependency Injection), which exposes 2 APIs

• a method to trigger the execution of the remote service
• an Observable which emits the result of the service call once it arrives

So the code of the service could look like this

export class MyService {
  // define a private Subject and then export it as an Observable
  // this Subject emits any time a result is received from the remote service
  // you can use a ReplaySubject if you want chaching
  private _dataFromRemoteService$ = new Subject<any>()
  // API clients can subscribe to to receive the data
  public dataFromRemoteService$ = _dataFromRemoteService$.asObservable()

  // private Subject used as trigger for the fetch operation
  private _trigger$ = new Subject<any>();
  // API to be called to trigger the execution of the remote service
  public fetchData() {
    _trigger.next();
  }
  // private method that subscribes to the trigger and uses debounce to control the number of calls to remote service
  private _fetchData() {
     this._trigger.pipe(
        debounceTime(1000),
        switchMap(this.http.get<any>('endpoint')
     )
     // the result received from the remote service is broadcasted to all subscribers of dataFromRemoteService$
     .subscribe(_dataFromRemoteService$)
  }
  
  constructor() {
     // start the subscription
     _fetchData();
  }
}

Now any Component subscribe to dataFromRemoteService$ to receive the data once ready and can call the method fetchData to trigger the execution of the remote service.

export class MyComponent implements OnInit {
  constructor(private service: MyService) {}

  ngOnInit(): void {
     // Subscribe to the stream of results of the execution of the service
     this.service.dataFromRemoteService$.subscribe(
        data => {// do something with the data received from remote service}
     )

     // trigger the execution of the service
     this.service.fetchData();
  }
}

One of the main advantages of this approach is that you can test the service easily in different situations, e.g. with many clients requesting the remote data in a fast sequence.

Answer 3

Thank you, in the meantime I've came up with an upgrade to my cache service, but since it's seems quite over-engineering, I'll probably accept other answer. Still, I believe the below code might be helpful to someone in the future.

Generally, the first request of with the specific type (urlWithParams) is stored in pending. Until this request is finished, further requests of the same type are stored in waiting with corresponding new, empty subject and observable from this subject is returned. When the pending request finishes, it sends the correct HttpResponse to waiting subjects of this type.

@Injectable()
export class HttpCacheInterceptor implements HttpInterceptor {
  constructor(private cache: CoreHttpCacheService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if( req.method !== 'GET' && req.method !== 'OPTIONS' ) {
      this.cache.clear();
    }

    if( req.method !== 'GET' || req.headers.get( CC.NO_CACHE ) ) {
      return next.handle(req);
    }

    const cachedResponse: HttpResponse<any> = this.cache.get(req.urlWithParams);

    if( this.cache.pending.has( req.urlWithParams ) ) {
      const sbj = new Subject<HttpEvent<any>>();
      this.cache.waiting.push( {r: req.urlWithParams, s: sbj} );
      return sbj.asObservable();
    } else {
      if( cachedResponse ) {
        return of( cachedResponse.clone() );
      } else {
        if( ! this.cache.pending.has( req.urlWithParams ) ) {
          this.cache.pending.add( req.urlWithParams );
        }
        return next.handle(req).pipe(
          tap(stateEvent => {
            if(stateEvent instanceof HttpResponse) {
              this.cache.set(req.urlWithParams, stateEvent.clone());

              let i = this.cache.waiting.length;
              while( i-- ) {
                if( this.cache.waiting[i].r === req.urlWithParams ) {
                  this.cache.waiting[ i ].s.next( stateEvent.clone() );
                  this.cache.waiting.splice( i, 1 );
                }
              }

              this.cache.pending.delete( req.urlWithParams );
            }
          })
        );
      }
    }
  }
}


@Injectable({
  providedIn: 'root'
})
export class CoreHttpCacheService {
  pending = new Set< string >();
  waiting: {r: string, s: Subject<HttpEvent<any>> }[] = [];

  private cache: Map< string, HttpResponse<any> > = new Map();

  private timers = new Map< string, NodeJS.Timer >();

  get( key: string ) {
    return this.cache.get( key );
  }

  set( key: string, v: any ) {
    this.timers.set( key, setTimeout( () => this.clear( key ), Constants.TIME_100SEC ) );
    return this.cache.set( key, v );
  }

  clear( key?: string ) {
    if( key !== undefined ) {
      this.cache.delete( key );
    } else {
      this.cache.clear();
    }
  }
}

This example will fail on HTTP error, compares requests only by urlWithParams and CoreHttpCacheService fields are public, so be careful if you'd like to use it.