Les intercepteurs angulaires sont des outils très puissants que les développeurs peuvent utiliser pour gérer la façon dont leurs applications gèrent les requêtes et les réponses HTTP. Ils jouent un rôle crucial dans la mise en œuvre de fonctionnalités telles que la journalisation, l'authentification, la gestion des erreurs, etc., ce qui conduit à un code plus clair et plus facile à maintenir.

Les intercepteurs angulaires agissent comme un middleware entre votre application Angular et le serveur. Ils interceptent les requêtes avant qu’elles ne soient envoyées au serveur et les réponses avant qu’elles n’atteignent nos composants applicatifs. Cela permet aux développeurs de modifier les demandes en ajoutant des en-têtes, en modifiant les corps des demandes/réponses et en changeant les codes d'état.

Configuration de votre projet angulaire

Tout d’abord, assurez-vous que Angular CLI est installé. Sinon, vous pouvez l'installer avec npm :

npm install -g @angular/cli

Maintenant, créez un nouveau projet Angular :

ng new Project_Name
cd Project_Name

Maintenant, générez un nouvel intercepteur HTTP avec Angular CLI :

ng generate interceptor interceptors/interceptorName

Cela créera deux fichiers : interceptorName.interceptor.ts et interceptorName.interceptor.spec.ts dans le répertoire src/app/interceptors.

Maintenant, ouvrez interceptorName.interceptor.ts et ajoutez la logique de votre intercepteur. Voici un exemple qui enregistre un message.

import { HttpInterceptorFn } from '@angular/common/http';

export const interceptorName: HttpInterceptorFn = (req, next) => {
  console.log('HTTP Request:', req);
  return next(req);
};

Maintenant, pour utiliser l'intercepteur, ouvrez app.config.ts et ajoutez-le au tableau des fournisseurs :

...
import { provideHttpClient,withInterceptors } from '@angular/common/http';
import { interceptorName } from './interceptors/interceptorName.interceptor';


export const appConfig: ApplicationConfig = {
  providers: [
    ....
    provideHttpClient(
      withInterceptors([interceptorName])
    ),
  ],
};

Cas d'utilisation avancés des intercepteurs angulaires

Transformation personnalisée des demandes et des réponses

Les intercepteurs peuvent adapter la transformation des données aux demandes et aux réponses, par exemple en modifiant le corps des demandes, les en-têtes ou les formats de données de réponse avant qu'ils ne soient traités par l'application.

import { HttpInterceptorFn, HttpResponse } from '@angular/common/http';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    body: { title:"Modified Request Body",id: 1 },
  });
  return next(modifiedReq);
};

Se moquer des scénarios de test

Les développeurs peuvent simuler différentes situations de serveur sans dépendre des services backend en direct en utilisant des intercepteurs pour simuler les réponses HTTP pendant les tests. Cette méthode permet de bien évaluer différents scénarios.

import { HttpInterceptorFn } from '@angular/common/http';
import { of } from 'rxjs';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
    // Mock response for testing
    if (req.url.endsWith('/test')) {
    const mockResponse = { id: 1, title: 'Test Data' };
    return of(new HttpResponse({ status: 200, body: mockResponse }));
  }
    // Pass through to actual HTTP request
    return next(req);
}

Mécanismes de gestion des erreurs et de nouvelles tentatives

Les intercepteurs angulaires améliorent les applications en mettant en œuvre des stratégies de gestion des erreurs, comme la nouvelle tentative automatique des demandes ayant échoué et la transformation des réponses aux erreurs pour améliorer l'expérience utilisateur.

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError,retry, throwError } from 'rxjs';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3), // Retry failed requests up to 3 times
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

Ici, l'intercepteur réessaye la demande ayant échoué jusqu'à trois fois avant de traiter l'erreur, garantissant ainsi plusieurs tentatives pour terminer avec succès la demande.

Chaînage des intercepteurs et contrôle de l'ordre d'exécution

Dans Angular, les développeurs peuvent lier plusieurs intercepteurs, chacun gérant différents aspects du traitement des requêtes comme l'authentification, la journalisation ou la gestion des erreurs. Ils s'exécutent dans l'ordre dans lequel ils sont enregistrés, permettant une modification précise des demandes et des réponses, garantissant une gestion flexible des flux de travail pour des fonctionnalités d'application améliorées.

import { HttpInterceptorFn, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

// First Interceptor: Authentication
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer YOUR_TOKEN`
    }
  });
  return next(authReq);
};

// Second Interceptor: Logging
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request URL:', req.url);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('Response Status:', event.status);
      }
    })
  );
};

// Third Interceptor: Error Handling
export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3),
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

// Registering Interceptors in Angular Module

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideHttpClient(
      withInterceptors([apiInterceptor,loggingInterceptor,errorHandlingInterceptor])
    ),
  ],
};

Gestion des événements et interaction DOM

Les intercepteurs angulaires ont la capacité d'intercepter les événements et les interactions DOM avant qu'Angular ne les traite. Cette fonctionnalité permet des tâches telles que la journalisation des interactions des utilisateurs, l'application de politiques de gestion des événements à l'échelle de l'application ou la réalisation de validations supplémentaires avant la propagation des événements au sein de l'application.

import { HttpInterceptorFn } from '@angular/common/http';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
  document.addEventListener('click', (event) => {
    console.log('Click event intercepted:', event);
    // Additional custom event handling logic
  });
  return next(req);
};

Interception à l'aide d'un outil externe

Les outils d'interception HTTP externes peuvent être incroyablement utiles dans divers scénarios, en particulier lorsque vous avez besoin de plus de contrôle sur vos requêtes et réponses HTTP au-delà de ce qui est disponible dans les intercepteurs intégrés. Ils sont particulièrement utiles pour tester et déboguer les API, simuler différentes conditions de serveur et garantir que votre application gère efficacement divers cas extrêmes.

Requestly est l'un de ces outils puissants qui améliore votre flux de travail de développement. Par exemple, supposons que vous développiez une application et que vous deviez tester comment elle gère une réponse réseau lente.

• Installation et configuration : installez facilement Requestly en tant qu'extension de navigateur et configurez des règles pour intercepter et modifier les requêtes et réponses HTTP.
• Gestion des règles : définissez et gérez des ensembles de règles basés sur des URL, des en-têtes ou des paramètres de requête pour intercepter les requêtes selon des critères spécifiques.
• Modification de demande : modifiez les demandes en ajoutant des en-têtes, en réécrivant des URL ou en redirigeant les demandes en fonction de règles prédéfinies, facilitant ainsi les tests dynamiques et les scénarios de débogage.
• Cas d'utilisation avancés : utilisez Requestly pour simuler différentes réponses du serveur, simuler des points de terminaison à des fins de test ou appliquer des conditions de réseau spécifiques pendant le développement.

Conclusion

Les intercepteurs angulaires sont des outils indispensables pour gérer la communication HTTP et améliorer la robustesse des applications angulaires. En maîtrisant les méthodes et en explorant des solutions externes comme Requestly, les développeurs peuvent rationaliser les intégrations d'API, améliorer les pratiques de sécurité et optimiser efficacement les performances. Adoptez des intercepteurs pour améliorer la fiabilité et l'évolutivité de vos applications Angular en gérant diverses interactions backend avec confiance et efficacité.