In deze tutorial wordt u geà ntroduceerd in HTTP-fouten in JavaScript, en hoe u de HttpClient met RxJS error handling operators gebruikt en tenslotte hoe u de HttpInterceptor

Dit is een diepe duik in HTTP error handling in Angular 7, U kunt het inleidende bericht over error handling hier bekijken.

Prerequisites

om door te kunnen gaan in de demonstratie van deze tutorial moet u:

  • Node Versie 11.0 geïnstalleerd hebben op uw machine.
  • Node Package Manager versie 6.7 (wordt meestal geleverd met Node installatie).
  • Angular CLI version 7.0
  • de laatste versie van Angular (version 7)
 // run the command in a terminal ng version

bevestig dat u Versie 7 gebruikt, en update naar 7 als u dat niet doet.Andere dingen die nice-to-haves zijn:

  • een praktische kennis van het Hoekraamwerk op beginnersniveau.
  • vertrouwdheid met Hoekdiensten is een pluspunt, maar geen vereiste.

Outsider fouten

Dit zijn fouten die we server side fouten noemen omdat ze voornamelijk afkomstig zijn van buiten de hoek applicatie en een HttpErrorResponse wordt altijd geretourneerd wanneer ze zich voordoen. Het heeft eigenschappen als:

  • foutnaam: dit geeft de naam van de fout aan.
  • Foutmelding: dit probeert de fout in eenvoudige termen uit te leggen voor een beter begrip.
  • foutstatus: elk type server side error heeft een code toegewezen om het te onderscheiden van de rest. Deze codes zijn meestal drie-cijferige codes zoals 400 die, betekent dat het verzoek verzonden was onverwacht of 500 die, signalen Interne serverfout en ga zo maar door.

foutafhandeling in Hoek

Hoekafhandeling heeft een globale foutafhandelingsklasse, genaamd errorHandler, die een hook biedt voor gecentraliseerde afhandeling van uitzonderingen in uw toepassing. Het onderschept in principe alle fouten die gebeuren in uw toepassing, en logt ze allemaal op de console, en stopt de app crashen.De syntaxis ziet er als volgt uit:

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

Dit is een geweldige manier om met hoekfouten om te gaan, in het bijzonder met insiderfouten.

de beperking van errorHandler

Als u volgde vanaf het inleidende bericht hier, zult u zien hoe de hoek errorHandler klasse de ultieme oplossing was voor het centraliseren van het try / catch concept van fouten in onze toepassing. Wanneer we ons echter willen concentreren op fouten aan de serverzijde, ontdekken we dat de errorHandler-klasse niet direct kan werken met HTTP-verzoeken in onze applicatie. Goed nieuws is hoekig biedt een soort interface waar u het concept van de errorHandler Klasse kunt gebruiken om direct te gaan met HTTP-verzoeken.

oplossing 1: hoekige HttpClient

de (https://angular.io/api/common/http/HttpClient) In @angular/common/``(https://angular.io/api/common/http) biedt een vereenvoudigde client HTTP API voor Hoekapplicaties die rust op de XMLHttpRequest interface die door browsers wordt blootgesteld. Bijkomende voordelen van (https://angular.io/api/common/http/HttpClient)zijn testability features, getypte request and response objects, request and response interception, Observable API ‘ s, en gestroomlijnde foutafhandeling. Dus met behulp van deze client met een aantal RxJS operators kunnen we een soort van try/catch manier van foutafhandeling krijgen, maar deze keer direct communiceren met de HTTP-verzoeken via een hoekige applicatie in een service. Je zult het beter begrijpen in actie.

Demo

Dit is een demo jsonplaceholder-toepassing waarbij delen van de beschikbare gegevens op de jsonplaceholder worden weergegeven op de gebruikersinterface, een perfecte service om servergerelateerde concepten te demonstreren. Als je alle voorwaarden die aan het begin van de post staan vermeld klaar hebt, kun je het project van GitHub hier downloaden. Unzip en open het project in VS-Code en gebruik de terminal om de knooppuntmodules te initialiseren:

 npm install

nu uw applicatie draait, moet u er eerst en vooral voor zorgen dat de module die nodig is voor Angular applicaties om een server service te gebruiken, actief is in uw applicatie. Navigeer naar uw app.module.ts bestand en bevestig dat er een import statement als dit is:

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

uw applicatie heeft vier componenten: berichten, zijbalk, details en gebruikers. Het heeft ook een service genaamd data service waar alle HTTP-verzoeken worden gedaan. Uw data.service.ts bestand moet er zo uitzien:

 // 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') } }

Er worden drie verzoeken aan de server gedaan, als u nu een van deze verzoeken kiest, zeg getUsers() en u wilt foutafhandeling toevoegen met de HttpClient dan zult u:

  • importeer het catchError object van RxJS operators.
  • importeer throwError van RxJS.
  • gebruik de pipe methode om het in de gewenste HTTP-aanvraag te introduceren.
  • Maak een methode aan om de fout af te handelen

Als u deze volgt, ziet uwdata.service.ts bestand er zo uit:

 // 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); } }

u zult zien dat er opzettelijk met het get-verzoek is geknoeid om er zeker van te zijn dat er een fout optreedt. Wanneer u de toepassing uitvoert, ziet u de fout gelogd met het Logbericht dat we willen.

soms als u een verzoek naar een bekende trage server stuurt, weet u dat het een tijdje kan duren om antwoord te krijgen of dat het een paar pogingen kan kosten om daadwerkelijk antwoord van de server te krijgen, kunt u het verzoek een aantal keren opnieuw verzenden voordat u de fout gooit. Dit kan worden bereikt met de methode retry in RxJS, dus je importeert de operator retry en dan kun je het in de pijp gebruiken zoals het hieronder wordt gebruikt:

 // 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); } }

als je de toepassing uitvoert, zou de console er zo uit moeten zien:

je ziet dat het eerst probeert om het antwoord te krijgen, dan probeert het het twee keer gewoon zoals we hebben opgegeven voordat het foutlogboekbericht werd gegooid.

Het is ook erg belangrijk dat uw poging voor de catchError komt, zodat de foutmelding niet wordt gelogd na elke proef.

deze oplossing werkt perfect zolang uw applicatie één service en waarschijnlijk één get request heeft, maar wanneer uw applicatie groot is en veel diensten of veel meer aanvragen per service heeft, wordt het een inefficiënte oplossing. Dit komt omdat je altijd de handle error-functie over services moet kopiëren en code moet herhalen, zelfs binnen een service. Stel je de geheugenkosten voor van het debuggen en onderhouden van de codebase.

de beste optie: Angular httpinterceptor

net zoals de naam al zegt, biedt Angular een interface genaamd de HttpInterceptor die (https://angular.io/api/common/http/HttpRequest) en (https://angular.io/api/common/http/HttpResponse) kan onderscheppen en een platform creëert om ze te verwerken. Dit betekent dat we direct toegang krijgen tot onze server verzoeken, Wat is een betere plek om te gaan met server fouten dan hier!De syntaxis ziet er als volgt uit:

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

om de HttpInterceptor te gebruiken , Maak een nieuwe service aan waar u uw interceptorlogica wilt gebruiken met De hoekige CLI:

 ng generate service services/interceptor

je hebt Nu gegenereerd interceptor service, ga naar de app.module.ts bestand om het te registreren dienovereenkomstig, zoals:

 // 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 { }

de Volgende stap is om zich te ontdoen van alle van de foutafhandeling logica in de data.service.ts bestand, het bestand moet er als volgt uitzien wanneer u klaar bent:

 // 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') } }

Kopieer de onderstaande code in de interceptor.service.ts bestand:

 // 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) ) }; }

Wanneer u de toepassing uitvoert, ziet u dat er logs onze foutbericht en gooit de fout net zoals we verwachten. Dit is de beste methode voor het verwerken van server fouten in uw hoekige project. U kunt alle drie verzoeken tegelijk op fouten testen door ermee te knoeien. Als je dat doet, zul je ontdekken dat de interceptor vangt ze allemaal en logt onze boodschap voor elk, het is echt geweldig om naar te kijken.

conclusie

u bent op verschillende manieren geà ntroduceerd om fouten aan de serverzijde in uw hoekige toepassingen af te handelen. U hebt ook gezien wanneer u de HttpClient met de RxJS operators moet gebruiken en hoe de beste manier is om interceptors te gebruiken. In de volgende zelfstudie in deze serie wordt u geïntroduceerd bij het volgen van fouten. De volledige code voor deze tutorial staat op GitHub en is hier te vinden. Veel succes met programmeren!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.