How to Use Retry in HTTP Request in Angular

In Angular, you can use the retry operator from rxjs/operators to automatically retry failed HTTP requests. Add retry(n) to your HTTP observable chain to retry the request n times before failing.

Syntax

The retry operator is used with Angular's HTTP observables to retry a failed request a specified number of times.

• retry(n): Retries the HTTP request n times on error.
• Used inside the pipe() method of the HTTP observable.
• Works with Angular's HttpClient which returns observables.

typescript

import { retry } from 'rxjs/operators';

this.httpClient.get('url')
  .pipe(
    retry(3) // retry up to 3 times on error
  )
  .subscribe(response => {
    // handle success
  }, error => {
    // handle error after retries
  });

Example

This example shows how to retry an HTTP GET request up to 2 times if it fails before showing an error message.

typescript

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { retry } from 'rxjs/operators';

@Component({
  selector: 'app-retry-example',
  template: `
    <div *ngIf="data">Data: {{ data }}</div>
    <div *ngIf="error">Error: {{ error }}</div>
  `
})
export class RetryExampleComponent {
  data: any = null;
  error: string | null = null;

  constructor(private http: HttpClient) {
    this.loadData();
  }

  loadData() {
    this.http.get('https://api.example.com/data')
      .pipe(
        retry(2) // retry twice before failing
      )
      .subscribe({
        next: res => {
          this.data = JSON.stringify(res);
          this.error = null;
        },
        error: err => {
          this.error = 'Failed to load data after retries';
          this.data = null;
        }
      });
  }
}

Output

If the HTTP request succeeds, the component displays: Data: { ...response data... }
If it fails after 2 retries, it shows: Error: Failed to load data after retries

Common Pitfalls

Common mistakes when using retry include:

• Not placing retry inside the pipe() method.
• Retrying indefinitely by using retry() without a number, which can cause infinite loops.
• Not handling errors after retries, leading to silent failures.
• Retrying requests that should not be repeated, like POST requests that cause side effects.

typescript

/* Wrong: retry used outside pipe */
this.http.get('url')
  .retry(3) // Error: retry is not a method on Observable
  .subscribe();

/* Right: retry inside pipe */
this.http.get('url')
  .pipe(
    retry(3)
  )
  .subscribe();

Quick Reference

Operator	Purpose	Usage Example
retry(n)	Retries the observable n times on error	observable.pipe(retry(3))
retry()	Retries indefinitely (use with caution)	observable.pipe(retry())
catchError()	Handles errors after retries	observable.pipe(retry(2), catchError(err => ...))

Key Takeaways

Use the retry operator inside the pipe() method to retry HTTP requests.

Specify the number of retries to avoid infinite retry loops.

Handle errors after retries to inform users or take fallback actions.

Avoid retrying non-idempotent requests like POST to prevent side effects.

Combine retry with catchError for robust error handling.