A timeout interceptor can be used to set a maximum timeout for HTTP requests. It can be useful to prevent long-running requests from blocking your application.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';
import { throwError, timer, Observable } from 'rxjs';
import { catchError, timeout } from 'rxjs/operators';

@Injectable()
export class TimeoutInterceptor implements HttpInterceptor {

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ): Observable<any> {
    const timeoutDuration = 10000; // 10 seconds
    return next.handle(request).pipe(
      timeout(timeoutDuration),
      catchError((error) => {
        if (error.name === 'TimeoutError') {
          // Handle timeout error here
          console.error(
           'Request timed out:', request.url
          );
          return throwError('Request timed out');
        }
        return throwError(error);
      })
    );
  }
}

A base URL interceptor can be used to prepend a base URL to all HTTP requests, simplifying the configuration of API endpoints.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';

@Injectable()
export class BaseUrlInterceptor implements HttpInterceptor {
  private baseUrl = 'https://api.example.com';

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const apiRequest = request.clone({
      url: `${this.baseUrl}${request.url}`,
    });
    return next.handle(apiRequest);
  }
}

A retry interceptor can be used to automatically retry failed HTTP requests, which can be helpful in handling intermittent network issues.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';
import { retry } from 'rxjs/operators';

@Injectable()
export class RetryInterceptor implements HttpInterceptor {

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    // Define the maximum number of retries
    const maxRetries = 3;

    return next.handle(request)
               .pipe(retry(maxRetries));
  }
}

An offline mode interceptor can be used to detect when the user’s device is offline and handle HTTP requests accordingly, such as storing them for later or showing a friendly message.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpErrorResponse,
} from '@angular/common/http';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class OfflineModeInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    if (!navigator.onLine) {
      console.error(
         'Device is offline. Request not sent:', 
         request.url
      );
      return throwError(
         new HttpErrorResponse({ 
           status: 0, 
           statusText: 'Offline' 
         })
      );
    }

    return next.handle(request);
  }
}

A JWT refresh token interceptor can be used to automatically refresh expired JSON Web Tokens (JWTs) and seamlessly continue making authenticated requests.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpErrorResponse,
} from '@angular/common/http';
import { AuthService } from './auth.service';
import { catchError, switchMap } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class JwtRefreshInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        if (
          error.status === 401 
         && error.error 
         && error.error.message === 'Token expired'
       ) {

          return this.authService.refreshToken().pipe(
            switchMap(() => {
              // Retry the original 
              // request with the new token
              const token = `Bearer ${
                this.authService.getAccessToken()
              }`;
              const updatedRequest = request.clone({
                setHeaders: { Authorization: token },
              });
              return next.handle(updatedRequest);
            }),
            catchError(() => {
              // Refresh token failed; 
              // log out the user or 
              // handle the error
              // For example, you can 
              // redirect to the login page
              this.authService.logout();
              const msg = 'Token refresh failed';
              return throwError(msg);
            })
          );
        }
        return throwError(error);
      })
    );
  }
}

A request timing interceptor can be used to measure and log the time taken for each HTTP request, helping you identify performance bottlenecks.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';
import { tap } from 'rxjs/operators';

@Injectable()
export class RequestTimingInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const msg = `
      Request to ${request.url} took ${duration}ms
    `;
    const startTime = Date.now();
    return next.handle(request)
      .pipe(
        tap(() => {
          const endTime = Date.now();
          const duration = endTime - startTime;
          console.log(msg);
        })
      );
  }
}

A localization interceptor can be used to automatically include the user’s preferred language or locale in HTTP requests, ensuring that the server sends responses in the appropriate language.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';
import { LocaleService } from './locale.service';

@Injectable()
export class LocalizationInterceptor implements HttpInterceptor {
  constructor(private localeService: LocaleService) {}

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const userLocale = this.localeService.getUserLocale();
    const localizedRequest = request.clone({
      setHeaders: {
        'Accept-Language': userLocale,
      },
    });
    return next.handle(localizedRequest);
  }
}

A CSP interceptor can be used to automatically add Content Security Policy headers to outgoing HTTP requests to improve security.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';

@Injectable()
export class CspInterceptor implements HttpInterceptor {

  intercept(
    request: HttpRequest<any>, 
    next: HttpHandler
  ) {
    const cspHeader = "default-src 'self'; script-src 'self' 'unsafe-inline'";
    const cspRequest = request.clone({
      setHeaders: {
        'Content-Security-Policy': cspHeader,
      },
    });
    return next.handle(cspRequest);
  }
}

A compression interceptor can be used to automatically request compressed content (e.g., gzip) from the server, reducing the amount of data transferred over the network.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';

@Injectable()
export class CompressionInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const compressedRequest = request.clone({
      setHeaders: { 
        'Accept-Encoding': 'gzip, deflate' 
      },
    });
    return next.handle(compressedRequest);
  }
}