Dans ce tutoriel, vous découvrirez les erreurs HTTP en JavaScript, et comment utiliser les HttpClient avec les opérateurs de gestion des erreurs RxJS et enfin comment utiliser le HttpInterceptor

Ceci est une plongée en profondeur dans la gestion des erreurs HTTP dans Angular 7, vous voudrez peut-être consulter le post d’introduction sur la gestion des erreurs ici.

Prérequis

Pour pouvoir suivre la démonstration de ce tutoriel, vous devez avoir:

  • Node version 11.0 installé sur votre machine.
  • Gestionnaire de paquets Node version 6.7 (généralement livré avec l’installation du nœud).
  • Angular CLI version 7.0
  • La dernière version d’Angular (version 7)
 // run the command in a terminal ng version

Confirmez que vous utilisez la version 7 et mettez-la à 7 si vous ne l’êtes pas.D’autres choses qui seront agréables à avoir sont:

  • Une connaissance pratique du cadre angulaire à un niveau débutant.
  • La familiarité avec les services Angulaires sera un plus mais pas une exigence.

Erreurs extérieures

Ce sont des erreurs que nous appelons erreurs côté serveur car elles proviennent principalement de l’extérieur de l’application angulaire et un HttpErrorResponse est toujours renvoyé chaque fois qu’elles se produisent. Il a des propriétés telles que :

  • Nom de l’erreur : indique le nom de l’erreur.
  • Message d’erreur: ceci essaie d’expliquer l’erreur en termes simples pour une compréhension plus facile.
  • Statut d’erreur: chaque type d’erreur côté serveur a un code qui lui est attribué pour le différencier des autres. Ces codes sont généralement des codes à trois chiffres comme 400, ce qui signifie que la demande envoyée était inattendue ou 500, ce qui signale une erreur de serveur interne, etc.Le gestionnaire d’erreurs

dans Angular

Angular a une classe globale de gestion des erreurs appelée errorHandler qui fournit un hook pour la gestion centralisée des exceptions dans votre application. Il intercepte essentiellement toutes les erreurs qui se produisent dans votre application, les enregistre toutes sur la console et empêche l’application de se bloquer.La syntaxe ressemble à ceci:

 class MyErrorHandler implements ErrorHandler { handleError(error) { // do something with the exception } } @NgModule({ providers: }) class MyModule {}

C’est un excellent moyen de gérer les erreurs dans Angular, en particulier les erreurs d’initié.

La limitation de errorHandler

Si vous avez suivi le post d’introduction ici, vous verrez comment la classe errorHandler angulaire était la solution ultime pour centraliser le concept d’erreur try / catch dans notre application. Cependant, lorsque nous voulons nous concentrer sur les erreurs côté serveur, nous découvrons que la classe errorHandler ne peut pas fonctionner directement avec les requêtes HTTP dans notre application. La bonne nouvelle est qu’Angular fournit une sorte d’interface où vous pouvez utiliser le concept de la classe errorHandler pour traiter directement les requêtes HTTP.

Solution 1: Angular HttpClient

La (https://angular.io/api/common/http/HttpClient) dans @angular/common/``(https://angular.io/api/common/http) offre une API HTTP client simplifiée pour les applications Angulaires qui repose sur l’interface XMLHttpRequest exposée par les navigateurs. Les avantages supplémentaires de (https://angular.io/api/common/http/HttpClient) incluent des fonctionnalités de testabilité, des objets de requête et de réponse typés, une interception de requête et de réponse, des API Observable et une gestion simplifiée des erreurs. Donc, en utilisant ce client avec certains opérateurs RxJS, nous pouvons obtenir une sorte de méthode de gestion des erreurs try / catch, mais cette fois en communiquant directement avec les requêtes HTTP via une application Angular dans un service. Vous le comprendrez mieux en action.

Démo

Ceci est une application jsonplaceholder de démonstration où des parties des données disponibles sur jsonplaceholder sont affichées sur l’interface utilisateur, un service parfait pour démontrer des concepts liés au serveur. Si vous avez tous les prérequis indiqués au début de la publication prêts, vous pouvez télécharger le projet depuis GitHub ici. Décompressez et ouvrez le projet dans le code VS et utilisez le terminal pour initialiser les modules de nœuds:

 npm install

Maintenant que votre application est opérationnelle, vous devez d’abord vous assurer que le module requis par les applications Angulaires pour utiliser n’importe quel service serveur est actif dans votre application. Accédez à votre fichier app.module.ts et confirmez qu’il existe une instruction d’importation comme celle-ci :

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

Votre application comporte quatre composants : messages, barre latérale, détails et utilisateurs. Il dispose également d’un service appelé service de données où toutes les requêtes HTTP sont effectuées. Votre fichier data.service.ts devrait ressembler à ceci:

 // src/app/services/data.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class DataService { constructor(private http: HttpClient) { } getUsers() { return this.http.get('https://jsonplaceholder.typicode.com/users') } getUser(userId) { return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId) } getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts') } }

Trois demandes sont faites au serveur, maintenant si vous choisissez l’une de ces demandes, disons getUsers() et que vous souhaitez ajouter la gestion des erreurs avec le HttpClient, vous :

  • Importerez l’objet catchError des opérateurs RxJS.
  • Importer une erreur de lancement depuis RxJS.
  • Utilisez la méthode pipe pour l’introduire dans la requête HTTP souhaitée.
  • Créez une méthode pour gérer l’erreur

Si vous suivez ces instructions, votre fichier data.service.ts ressemblera à ceci:

 // src/app/services/data.service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { catchError } from 'rxjs/operators' import { throwError } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DataService { constructor(private http: HttpClient) { } getUsers() { return this.http.get('https://jsonplaceholder.typicode.com/usssers') .pipe( catchError(this.handleError) ); } getUser(userId) { return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId) } getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts') } handleError(error: HttpErrorResponse){ console.log("lalalalalalalala"); return throwError(error); } }

Vous verrez que la requête get a été délibérément altérée pour garantir qu’une erreur se produise. Lorsque vous exécutez l’application, vous verrez l’erreur enregistrée avec le message de journal que nous voulons.

Parfois, lorsque vous envoyez une requête à un serveur lent bien connu, vous savez que cela peut prendre un certain temps pour obtenir une réponse ou prendre quelques essais pour obtenir une réponse du serveur, vous pouvez renvoyer la requête plusieurs fois avant de lancer l’erreur. Cela peut être réalisé avec la méthode de nouvelle tentative dans RxJS, vous importez donc l’opérateur de nouvelle tentative, puis vous pouvez l’utiliser à l’intérieur du tuyau comme il est utilisé ci-dessous:

 // src/app/services/data.service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { catchError, retry } from 'rxjs/operators' import { throwError } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DataService { constructor(private http: HttpClient) { } getUsers() { return this.http.get('https://jsonplaceholder.typicode.com/usssers') .pipe( retry(2), catchError(this.handleError) ); } getUser(userId) { return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId) } getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts') } handleError(error: HttpErrorResponse){ console.log("lalalalalalalala"); return throwError(error); } }

Si vous exécutez l’application, la console devrait ressembler à ceci:

Vous voyez qu’il essaie d’abord d’obtenir la réponse, puis retente deux fois comme nous l’avons spécifié avant de lancer le message du journal des erreurs.

Il est également très important que votre nouvelle tentative arrive avant l’erreur de capture afin que le message d’erreur ne soit pas enregistré après chaque essai.

Cette solution fonctionne parfaitement tant que votre application a un service et probablement une demande get, mais lorsque votre application est grande et a de nombreux services ou beaucoup plus de demandes par service, elle devient une solution inefficace. En effet, vous devez toujours copier la fonction d’erreur de poignée entre les services et répéter le code même au sein d’un service. Imaginez le coût de mémoire du débogage et de la maintenance de la base de code.

La meilleure option: Angular HttpInterceptor

Tout comme son nom l’indique, Angular fournit une interface appelée HttpInterceptor qui peut intercepter (https://angular.io/api/common/http/HttpRequest) et (https://angular.io/api/common/http/HttpResponse) et crée une plate-forme pour les gérer. Cela signifie que nous obtenons un accès direct à nos demandes de serveur, quel meilleur endroit pour traiter les erreurs de serveur qu’ici!La syntaxe ressemble à ceci:

 interface HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> }

Pour utiliser le HttpInterceptor, créez un nouveau service dans lequel vous souhaitez que votre logique d’intercepteur entre avec la CLI angulaire:

 ng generate service services/interceptor

Maintenant que vous avez généré un service d’interception, accédez à votre fichier app.module.ts pour l’enregistrer en conséquence, comme ceci:

 // src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { UsersComponent } from './components/users/users.component'; import { DetailsComponent } from './components/details/details.component'; import { PostsComponent } from './components/posts/posts.component'; import { SidebarComponent } from './components/sidebar/sidebar.component'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { InterceptorService } from './services/interceptor.service'; @NgModule({ declarations: , imports: , providers: , bootstrap: }) export class AppModule { }

L’étape suivante consiste à se débarrasser de toute la logique de gestion des erreurs dans le data.service.tsfichier, le fichier devrait ressembler à ceci lorsque vous avez terminé:

 // src/app/services/data.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class DataService { constructor(private http: HttpClient) { } getUsers() { return this.http.get('https://jsonplaceholder.typicode.com/usersss') } getUser(userId) { return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId) } getPosts() { return this.http.get('https://jsonplaceholder.typicode.com/posts') } }

Copiez le code ci-dessous dans le interceptor.service.ts fichier:

 // src/app/services/interceptor.service.ts import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class InterceptorService implements HttpInterceptor{ constructor() { } handleError(error: HttpErrorResponse){ console.log("lalalalalalalala"); return throwError(error); } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{ return next.handle(req) .pipe( catchError(this.handleError) ) }; }

Si vous exécutez l’application, vous pouvez voyez qu’il enregistre notre message d’erreur et renvoie l’erreur comme nous l’attendons. C’est la meilleure méthode pour gérer les erreurs de serveur dans votre projet Angular. Vous pouvez tester les trois requêtes à la fois pour détecter les erreurs en les falsifiant. Lorsque vous le ferez, vous découvrirez que l’intercepteur les attrape tous et enregistre notre message pour chacun, c’est vraiment incroyable à regarder.

Conclusion

Vous avez découvert différentes façons de gérer les erreurs côté serveur dans vos applications Angular. Vous avez également vu quand utiliser et quand ne pas utiliser le HttpClient avec les opérateurs RxJS et comment la meilleure façon est d’utiliser les intercepteurs. Dans le prochain tutoriel de cette série, vous serez initié au suivi des erreurs. Le code complet de ce tutoriel est sur GitHub et peut être trouvé ici. Bon codage!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.