Comprendre les intercepteurs angulaires : au-delà de HTTP

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 divers 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 requêtes 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 gérer 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 une fonctionnalité améliorée de l'application.

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éveloppez une application et que vous deviez tester comment elle gère une réponse réseau lente.

• Pemasangan dan Konfigurasi: Pasang Requestly dengan mudah sebagai sambungan penyemak imbas dan sediakan peraturan untuk memintas dan mengubah suai permintaan dan respons HTTP.
• Pengurusan Peraturan: Tentukan dan urus set peraturan berdasarkan URL, pengepala atau parameter pertanyaan untuk memintas permintaan mengikut kriteria tertentu.
• Minta Pengubahsuaian: Ubah suai permintaan dengan menambahkan pengepala, menulis semula URL atau mengubah hala permintaan berdasarkan peraturan yang telah ditetapkan, memudahkan ujian dinamik dan senario penyahpepijatan.
• Kes Penggunaan Terperinci: Gunakan Permintaan untuk mensimulasikan respons pelayan yang berbeza, mengejek titik akhir untuk tujuan ujian atau menguatkuasakan keadaan rangkaian tertentu semasa pembangunan.

Kesimpulan

Pemintas sudut ialah alat yang sangat diperlukan untuk mengurus komunikasi HTTP dan meningkatkan keteguhan aplikasi Sudut. Dengan menguasai kaedah dan meneroka penyelesaian luaran seperti Requestly, pembangun boleh menyelaraskan integrasi API, meningkatkan amalan keselamatan dan mengoptimumkan prestasi dengan berkesan. Terima pemintas untuk meningkatkan kebolehpercayaan dan kebolehskalaan aplikasi Sudut anda dalam mengendalikan interaksi bahagian belakang yang pelbagai dengan keyakinan dan kecekapan.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!