Dans ce tutoriel nous allons voir comment créer un intercepteur http en Angular étape par étape.
Un intercepteur HTTP vous permet d’intercepter les demandes et les réponses HTTP afin de pouvoir les modifier.
C’est très utile, en particulier lorsque vous souhaitez ajouter des en-têtes supplémentaires à toutes les demandes sortantes ou intercepter des réponses d’erreur du serveur.
LIRE AUSSI: Comment installer Angular CLI sur Ubuntu 20.04
Un scénario d’utilisation d’intercepteur consiste à ajouter un en-tête d’autorisation pour l’authentification à toutes les demandes.
Vous pouvez ajouter manuellement un en-tête d’autorisation à toutes les requêtes, mais cela demande beaucoup de travail, ou vous pouvez automatiquement intercepter et ajouter l’en-tête avant d’envoyer la requête au serveur.
Un autre scénario d’utilisation est la gestion des erreurs et la mise en cache du contenu.
Vous pouvez utiliser un intercepteur pour détecter les erreurs et les consigner ou transmettre le contenu mis en cache à l’utilisateur au lieu de récupérer le contenu du serveur.
LIRE AUSSI: Comment mettre à jour NodeJS vers la dernière version?
Nous allons créer un intercepteur HTTP simple qui capturera toutes les requêtes sortantes et les réponses entrantes et les enregistrera dans la console.
Vous pouvez afficher la console de votre navigateur en ouvrant les outils de développement.
Créer un intercepteur http en Angular
Tout d’abord, nous allons créer une nouvelle application Angular 5 à l’aide de l’interface CLI d’angulaire.
ng new httpinterceptor
Un nouveau répertoire sera créé, appelé httpinterceptor.
C’est l’emplacement de votre projet nouvellement créé.
Nous allons utiliser JSON PlaceHolder en tant que point de terminaison pour effectuer nos requêtes http.
Il s’agit d’une fausse API REST en ligne pour les tests et le prototypage.
Il existe plusieurs variantes de requêtes http que nous pouvons appeler en espérant obtenir des résultats différents, il est également gratuit.
Pour faire des requêtes http, nous devons importer le HttpClientModule dans notre application dans le fichier app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Ensuite, nous devons ajouter deux boutons dans notre fichier app.component.html.
Les deux boutons appellent différentes méthodes au clic.
La première méthode appellera une véritable adresse URL, tandis que la seconde appellera une URL fictive inexistante, ce qui déclenchera une erreur.
Remplacez tout le contenu du fichier par ce qui suit:
<div style="text-align:center"> <h1>Click one of the two buttons</h1> <button (click)="method1Call()">Method 1</button> <button (click)="method2Call()">Method 1</button> </div>
Maintenant que nous avons une interface utilisateur, nous devons ajouter les deux méthodes à notre app.component.ts et importer HTTPClient.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private httpClient: HttpClient) {}
method1Call(): void {
this.httpClient
.get('https://jsonplaceholder.typicode.com/users')
.subscribe(success => {
console.log('Successfully Completed');
console.log(success);
});
}
method2Call(): void {
this.httpClient
.get('https://jsonplaceholder.typicode.com/user12')
.subscribe(success => {
console.log('Successfully Completed');
console.log(success);
});
}
}
Nous nous attendons à ce que la première demande aboutisse, mais que la deuxième échoue.
Au lieu d’utiliser la méthode fail dans une méthode subscribe, nous allons utiliser l’intercepteur pour détecter les erreurs et les consigner. Voici les résultats jusqu’à présent.
Ajout d’un intercepteur HTTP
Pour ajouter un intercepteur, créez une nouvelle classe à l’aide de la CLI d’angulaire.
ng g class my-http-interceptor
Et puis importez les modules suivants (HttpEvent, HttpInterceptor, HttpHandler, HttpRequest) à partir de HTTPClientModule.
Créez ensuite une méthode d’intercepteur comme suit:
import { Injectable, Injector } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
constructor() {}
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
console.log('intercepted request ... ');
// Clone the request to add the new header.
const authReq = req.clone({
headers: req.headers.set('headerName', 'headerValue')
});
console.log('Sending request with new header now ...');
//send the newly created request
return next.handle(authReq).catch((error, caught) => {
//intercept the respons error and displace it to the console
console.log('Error Occurred');
console.log(error);
//return the error to the method that called it
return Observable.throw(error);
}) as any;
}
}
Vous avez maintenant un intercepteur, mais cela ne fonctionnera pas car l’application ne sait pas qu’elle existe.
Ouvrez le fichier app.modules.ts et modifiez-le pour inclure l’intercepteur en: Important la classe d’intercepteurs de votre classe et importez HTTP_INTERCEPTORS à partir de @angular/common /http, comme indiqué ci-dessous.
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyHttpInterceptor } from './httpinterceptor';
Ajoutez ensuite un nouveau fournisseur HTTP_INTERCEPTOR à votre fichier app.modules.ts. Cela permettra à votre application de reconnaître et d’utiliser le nouvel intercepteur.
Ceci devrait être ajouté à l’intérieur des @NgModules sous les importations, comme illustré ci-dessous:
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MyHttpInterceptor,
multi: true
}
],
Votre nouvelle application.modules.ts devrait ressembler à ceci maintenant:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyHttpInterceptor } from './httpinterceptor';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MyHttpInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
LIRE AUSSI: Comment programmer des tâches Cron en Ruby On Rails ?
Conclusion
Dans ce tutoriel nous avons vu comment créer un intercepteur http en Angular étape par étape.
1 Comment