Search code examples
javascriptangularrxjsobservablereactivex

Repeat request (Angular2 - http.get) n seconds after finished


I played around with angular2 and got stuck after a while.

Using http.get works fine for a single request, but I want to poll live-data every 4 seconds, after tinkering for quite a while and reading a lot of reactivex stuff i ended up with:

Observable.timer(0,4000)
  .flatMap(
    () => this._http.get(this._url)
       .share()
       .map(this.extractData)
       .catch(this.handleError)
  )
  .share(); 

Is there a simple way to start a (4 second) interval after the http.get-observable has emitted the result of the request? (Or will I end up in observable-hell?)

Timeline i want:

Time(s): 0 - - - - - 1 - - - - - 2 - - - - - 3 - - - - - 4 - - - - - 5 - - - - - 6
Action:  Request - - Response - - - - - - - - - - - - - - - - - - - -Request-... 
Wait:                | wait for 4 seconds -------------------------> |

Solution

  • Update to RxJS 6

    import { timer } from 'rxjs';
    import { concatMap, map, expand, catchError } from 'rxjs/operators';
    
    pollData$ = this._http.get(this._url)
      .pipe(
        map(this.extractData),
        catchError(this.handleError)
      );
    
    pollData$.pipe(
      expand(_ => timer(4000).pipe(concatMap(_ => pollData$)))
    ).subscribe();
    

    I'm using RxJS 5 and I'm not sure what the RxJS 4 equivalent operators are. Anyway here is my RxJS 5 solution, hope it helps:

    var pollData = this._http.get(this._url)
                .map(this.extractData)
                .catch(this.handleError);
    pollData.expand(
      () => Observable.timer(4000).concatMap(() => pollData)
    ).subscribe();
    

    The expand operator will emit the data and recursively start a new Observable with each emission