How to create an RXjs RetryWhen with delay and limit on tries

by

You need to apply the limit to the retry signal, for instance if you only wanted 10 retries:

loadSomething(): Observable<SomeInterface> {
  return this.http.get(this.someEndpoint, commonHttpHeaders())
    .retryWhen(errors => 
      // Time shift the retry
      errors.delay(500)
            // Only take 10 items
            .take(10)
            // Throw an exception to signal that the error needs to be propagated
            .concat(Rx.Observable.throw(new Error('Retry limit exceeded!'))
    );

EDIT

Some of the commenters asked how to make sure that the last error is the one that gets thrown. The answer is a bit less clean but no less powerful, just use one of the flattening map operators (concatMap, mergeMap, switchMap) to check which index you are at.

Note: Using the new RxJS 6 pipe syntax for future proofing (this is also available in later versions of RxJS 5).

loadSomething(): Observable<SomeInterface> {
  const retryPipeline = 
    // Still using retryWhen to handle errors
    retryWhen(errors => errors.pipe(
      // Use concat map to keep the errors in order and make sure they
      // aren't executed in parallel
      concatMap((e, i) => 
        // Executes a conditional Observable depending on the result
        // of the first argument
        iif(
          () => i > 10,
          // If the condition is true we throw the error (the last error)
          throwError(e),
          // Otherwise we pipe this back into our stream and delay the retry
          of(e).pipe(delay(500)) 
        )
      ) 
  ));

  return this.http.get(this.someEndpoint, commonHttpHeaders())
    // With the new syntax you can now share this pipeline between uses
    .pipe(retryPipeline)
}

More Related Contents:

  1. Angular/RxJS When should I unsubscribe from `Subscription`
  2. Observable type error: cannot read property of undefined
  3. Angular 7 – nesting Observables
  4. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  5. fromPromise does not exist on type Observable
  6. How to return observable from subscribe
  7. How to return value inside subscribe Angular 4
  8. What is the correct way to share the result of an Angular Http network call in RxJs 5?
  9. Is it necessary to unsubscribe from observables created by Http methods?
  10. Convert Promise to Observable
  11. Passing Data with Subjects and Proxies
  12. async/await in Angular `ngOnInit`
  13. Angular 2 cache observable http result data [duplicate]
  14. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  15. Making sure observables in for loop are all finished before executing other code
  16. Best way to import Observable from rxjs
  17. Behaviour subject initial value null?
  18. Observable.of is not a function
  19. How can I create an observable with a delay
  20. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  21. Angular 2 Observable with multiple subscribers
  22. RxJs get value from observable
  23. How to correctly import operators from the `rxjs` package
  24. What is pipe for in RxJS?
  25. How to create an Observable from static data similar to http one in Angular?
  26. How to throw error from RxJS map operator (angular)
  27. RxJs Array of Observable to Observable of Array
  28. Angular 5 to 6 Upgrade: Property ‘map’ does not exist on type Observable
  29. Angular2 watch for 302 redirect when fetching resource
  30. FormControl.detectchanges – why use distinctUntilChanged?

Leave a Comment