title: Retry HTTP requests in angular 6
body: <p>I use an interceptor to show error messages on display based on the HTTP response for every request.</p>
  
  <pre><code>intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      const customReq = request.clone({
          //headers: request.headers.set('app-language', 'en')
      });
      return next
          .handle(customReq).pipe(
              tap((ev: HttpEvent&lt;any&gt;) =&gt; {
                  if (ev instanceof HttpResponse) {
                      // processing request
                  }
              }),
              catchError(response =&gt; {
                  if (response instanceof HttpErrorResponse) {
                      switch (response.status) {
                          case 0:
                              // server API connection error show
                              break;
                          case 403:
                              // error Token Invalid and Redirect to logout
                              break;
                          case 401:
                              // error Token Invalid and Redirect to logout
                              break;
                          case 502:
                              // Bad gateway error
                              break;
                          case 500:
                              // internal server error
                              break;
                      }
                  }
                  // return next.handle(request);
                  return observableThrowError(response);
              })
          );
  }
  </code></pre>
  
  <p>In my project, the web server could be unavailable for a second in some case and reply a 500 error code. I don't want my web app to show an error message immediately after receiving an error and I want it to retry the request for a couple of times with a delay like one second.</p>
  
  <p>I already tried rxjs retry :</p>
  
  <pre><code>...
  .handle(customReq).pipe(retry(5),
  ...
  </code></pre>
  
  <p>it's not useful since it has no delay.
  based on this answer
  <a href="https://stackoverflow.com/questions/44911251/how-to-create-an-rxjs-retrywhen-with-delay-and-limit-on-tries">How to create an RXjs RetryWhen with delay and limit on tries</a></p>
  
  <p>I tried retryWhen like:</p>
  
  <pre><code>.handle(customReq).pipe(
      tap((ev: HttpEvent&lt;any&gt;) =&gt; {
          if (ev instanceof HttpResponse) {
              console.log('###processing response', ev, this.location);
          }
      }),
      retryWhen(error =&gt; {
          return error
              .flatMap((error: any) =&gt; {
                  if (error.status  == 400) {
                      return Observable.of(error.status).delay(1000);
                  }
                  if (error.status  == 0) {
                      return observableThrowError(error).delay(1000);
                  }
                  return observableThrowError(error);
              })
              .take(5)
              .concat(observableThrowError(error));
      }),
  </code></pre>
  
  <p>but it doesn't work as expected and it doens't go inside the if conditions.</p>