i denna handledning kommer du att introduceras till HTTP-fel i JavaScript och hur man använder HttpClient med rxjs-felhanteringsoperatörer och slutligen hur man använder HttpInterceptor

detta är ett djupt dyk i HTTP-felhantering i angular 7, Du kanske vill kolla in det inledande inlägget om felhantering här.

förutsättningar

För att kunna följa upp i den här handledningens demonstration bör du ha:

  • Node version 11.0 installerad på din maskin.
  • Node Package Manager version 6.7 (skickas vanligtvis med Nodinstallation).
  • Angular CLI version 7.0
  • den senaste versionen av Angular (version 7)
 // run the command in a terminal ng version

bekräfta att du använder version 7 och uppdatera till 7 om du inte är det.Andra saker som kommer att vara trevliga är:

  • en fungerande kunskap om Vinkelramen på nybörjarnivå.
  • förtrogenhet med Angular tjänster kommer att vara ett plus men inte ett krav.

Outsider errors

det här är fel som vi kallar serversidfel eftersom de huvudsakligen kommer från utsidan Vinkelprogrammet och ett HttpErrorResponse returneras alltid när de inträffar. Det har egenskaper som:

  • Felnamn: detta anger namnet på felet.
  • felmeddelande: detta försöker förklara felet i enkla termer för enklare förståelse.
  • felstatus: varje typ av serversidfel har en kod tilldelad för att skilja den från resten. Dessa koder är vanligtvis tresiffriga koder som 400 vilket betyder att den skickade begäran var oväntad eller 500 som signalerar Internt serverfel och så vidare.

felhanterare i Angular

Angular har en global felhanteringsklass som heter errorHandler som ger en krok för centraliserad undantagshantering i din applikation. Det avlyssnar i princip alla fel som händer i din ansökan och loggar dem alla till konsolen och stoppar appen från att krascha.Syntaxen ser ut så här:

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

detta är ett utmärkt sätt att hantera fel i vinkel, särskilt insiderfel.

begränsningen av errorHandler

om du följde från det inledande inlägget här ser du hur Angular errorHandler-klassen var den ultimata lösningen för att centralisera try/catch-begreppet fel i vår ansökan. Men när vi vill fokusera på fel på serversidan upptäcker vi att errorHandler-klassen inte kan fungera direkt med HTTP-förfrågningar i vår applikation. Goda nyheter är Angular ger ett slags gränssnitt där du kan använda begreppet errorHandler-klassen för att hantera direkt HTTP-förfrågningar.

lösning 1: vinkel HttpClient

(https://angular.io/api/common/http/HttpClient) I @angular/common/``(https://angular.io/api/common/http) erbjuder en förenklad klient HTTP API för vinkel program som vilar på XMLHttpRequest gränssnitt exponeras av webbläsare. Ytterligare fördelar med(https://angular.io/api/common/http/HttpClient)inkluderar testbarhetsfunktioner, typade begäran och svarsobjekt, begäran och svaravlyssning,Observable API: er och strömlinjeformad felhantering. Så med hjälp av den här klienten med vissa rxjs-operatörer kan vi få ett slags försök/fånga sätt att hantera fel men den här gången kommunicerar direkt med HTTP-förfrågningarna via en Vinkelapplikation i en tjänst. Du kommer att förstå det bättre i aktion.

Demo

detta är en demo jsonplaceholder program där delar av tillgängliga data på jsonplaceholder visas på användargränssnittet, en perfekt tjänst för att visa serverrelaterade begrepp. Om du har alla förutsättningar som anges i början av inlägget redo kan du ladda ner projektet från GitHub här. Packa upp och öppna projektet i VS-kod och använd terminalen för att initiera nodmodulerna:

 npm install

Nu när din applikation är igång måste du först och främst se till att modulen som krävs för Angular applications för att använda någon servertjänst är aktiv i din applikation. Navigera till dinapp.module.ts – fil och bekräfta att det finns ett importuttalande så här:

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

din ansökan har fyra komponenter: inlägg, sidofält, detaljer och användare. Den har också en tjänst som heter data service där alla HTTP-förfrågningar görs. Din data.service.ts – fil ska se ut så här:

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

tre förfrågningar görs till servern, nu om du väljer en av dessa förfrågningar, säg getUsers() och du vill lägga till felhantering med HttpClient så kommer du:

  • importera catchError-objektet från RxJS-operatörer.
  • importera throwError från RxJS.
  • använd rörmetoden för att introducera den i önskad HTTP-begäran.
  • skapa en metod för att hantera felet

om du följer dessa kommer din data.service.ts – fil att se ut så här:

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

Du kommer att se att get-begäran medvetet manipulerades för att säkerställa att ett fel uppstår. När du kör programmet ser du felet loggat med loggmeddelandet vi vill ha.

Ibland när du skickar en begäran till en välkänd långsam server, vet du att det kan ta ett tag att få svar eller ta några försök att faktiskt få svar från servern, kan du skicka begäran ett antal gånger innan du kastar felet. Detta kan uppnås med retry-metoden i RxJS, så du importerar retry-operatören så kan du använda den inuti röret som den används nedan:

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

om du kör programmet ska konsolen se ut så här:

du ser att den först försöker få svaret, då kommer du att se att det försök om det två gånger precis som vi angav innan du kastade felloggen.

det är också mycket viktigt att ditt försök kommer före fångstfelet så att felmeddelandet inte loggas efter varje försök.

denna lösning fungerar perfekt så länge din ansökan har en tjänst och förmodligen en få begäran, men när din ansökan är stor och har många tjänster eller mycket fler förfrågningar per tjänst blir det en ineffektiv lösning. Detta beror på att du alltid måste kopiera handtagsfelfunktionen över tjänster och upprepa kod även inom en tjänst. Föreställ dig minneskostnaden för felsökning och underhåll av kodbasen.

det bästa alternativet: Angular HttpInterceptor

precis som namnet säger, tillhandahåller Angular ett gränssnitt som kallas HttpInterceptor som kan fånga upp (https://angular.io/api/common/http/HttpRequest) och (https://angular.io/api/common/http/HttpResponse) och skapar en plattform för att hantera dem. Det betyder att vi får direkt tillgång till våra serverförfrågningar, vilket bättre ställe att hantera serverfel än här!Syntaxen ser ut så här:

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

För att användaHttpInterceptor , skapa en ny tjänst där du vill att din interceptorlogik ska gå in med Angular CLI:

 ng generate service services/interceptor

nu har du genererat en interceptor-tjänst, navigera till din app.module.ts för att registrera den i enlighet därmed, så här:

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

nästa steg är att bli av med all felhanteringslogik i data.service.ts fil, filen ska se ut så här när du är klar:

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

kopiera koden nedan till interceptor.service.ts fil:

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

om du kör programmet måste du kan se att det loggar vårt felmeddelande och kastar felet precis som vi förväntar oss. Detta är den bästa metoden för att hantera serverfel i ditt Angular-projekt. Du kan testa alla tre förfrågningarna på en gång för fel genom att manipulera dem. När du gör det kommer du att ta reda på att interceptorn fångar dem alla och loggar vårt meddelande för varje, det är verkligen fantastiskt att titta på.

slutsats

Du har introducerats på olika sätt att hantera serversidfel i dina vinklade applikationer. Du har också sett när du ska använda och när du inte ska använda HttpClient med rxjs-operatörerna och hur det bästa sättet är att använda interceptorer. I nästa handledning i denna serie kommer du att introduceras till felspårning. Den fullständiga koden för denna handledning finns på GitHub och finns här. Lycklig kodning!

Lämna ett svar

Din e-postadress kommer inte publiceras.