i denne opplæringen vil du bli introdusert TIL HTTP-feil I JavaScript, og hvordan du bruker HttpClient Med rxjs feilhåndtering operatører og til slutt hvordan du bruker HttpInterceptor

dette er et dypt dykk inn i http-feilhåndtering i angular 7, du vil kanskje sjekke ut det innledende innlegget Om feilhåndtering her.

Forutsetninger

For å kunne følge gjennom i denne opplæringen demonstrasjon bør du ha:

  • Node versjon 11.0 installert på maskinen din.
  • Node Package Manager versjon 6.7 (vanligvis leveres Med Node installasjon).
  • Angular cli versjon 7.0
  • Den nyeste versjonen Av Angular (versjon 7)
 // run the command in a terminal ng version

Bekreft at du bruker versjon 7, og oppdater til 7 hvis du ikke gjør det.Andre ting som vil være hyggelige å ha er:

  • en arbeidskunnskap om Vinkelrammen på nybegynnernivå.
  • Kjennskap Til Kantete tjenester vil være et pluss, men ikke et krav.

Outsider errors

dette er feil som vi kaller server side feil fordi de hovedsakelig kommer fra utsiden Av Vinkelapplikasjonen og en returneres alltid når de oppstår. Den har egenskaper som:

  • Feilnavn: dette sier navnet på feilen.
  • Feilmelding: dette forsøker å forklare feilen på en enkel måte for enklere forståelse.
  • Feilstatus: hver type server side feil har en kode tildelt den for å skille den fra resten. Disse kodene er vanligvis tresifrede koder som 400 som betyr at forespørselen sendt var uventet eller 500 som signalerer intern serverfeil og så videre.

Error handler I Angular

Angular har en global feilhåndteringsklasse kalt errorHandler som gir en krok for sentralisert unntakshåndtering i applikasjonen din. Det avskjærer i utgangspunktet alle feilene som skjer i søknaden din, og logger dem alle til konsollen, og stopper appen fra å krasje.Syntaksen ser slik ut:

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

Dette er en fin måte å håndtere feil I Angular, spesielt insider-feilene.

begrensningen av errorHandler

hvis du fulgte fra introduksjonsposten her, vil du se hvordan Angular errorHandler-klassen var den ultimate løsningen for å sentralisere try / catch-konseptet av feil i vår søknad. Men når vi vil fokusere på feil på serversiden, oppdager vi at errorHandler-klassen ikke kan fungere direkte med HTTP-forespørsler i søknaden vår. Gode nyheter Er Angular gir en slags grensesnitt der du kan bruke begrepet errorHandler klassen til å håndtere DIREKTE MED HTTP-forespørsler.

Løsning 1: Angular HttpClient

(https://angular.io/api/common/http/HttpClient) i @angular/common/``(https://angular.io/api/common/http) tilbyr en forenklet KLIENT HTTP API FOR Kantete programmer som hviler påXMLHttpRequest grensesnitt eksponert av nettlesere. Ytterligere fordeler med(https://angular.io/api/common/http/HttpClient)inkluderer testbarhetsfunksjoner, maskinskrevne forespørsels-og svarobjekter, avskjæring av forespørsler og svar, Observable Api-Er og strømlinjeformet feilhåndtering. Så ved å bruke denne klienten med Noen rxjs-operatører kan vi få en slags prøve/fange måte å håndtere feil, men denne gangen kommuniserer vi direkte MED HTTP-forespørslene gjennom Et Vinkelprogram i en tjeneste. Du vil forstå det bedre i aksjon.

Demo

Dette er en demo jsonplaceholder program der deler av de tilgjengelige data på jsonplaceholder vises på brukergrensesnittet, en perfekt tjeneste for å demonstrere server relaterte konsepter. Hvis du har alle forutsetningene som er oppgitt i begynnelsen av innlegget klar, kan du laste ned prosjektet fra GitHub her. Unzip og åpne prosjektet I VS-Kode og bruk terminalen til å initialisere nodemodulene:

 npm install

Nå som søknaden din er oppe og går, må du først og fremst sørge for at modulen som kreves For Vinkelapplikasjoner for å bruke en servertjeneste, er aktiv i søknaden din. Naviger tilapp.module.ts fil og bekreft at det er en import setning som dette:

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

søknaden din har fire komponenter: innlegg, sidebar, detaljer og brukere. Den har også en tjeneste kalt datatjeneste der ALLE HTTP-forespørsler er gjort. Din data.service.ts filen skal se slik ut:

 // 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 forespørsler blir gjort til serveren, nå hvis du velger en av disse forespørslene, si getUsers() og du vil legge til feilhåndtering Med HttpClient da vil du:

  • Importere catchError-objektet fra rxjs-operatører.
  • Import throwError fra RxJS.
  • Bruk rørmetoden til å introdusere den i ønsket HTTP-forespørsel.
  • Opprett en metode for å håndtere feilen

hvis du følger disse ,vildata.service.ts filen se slik ut:

 // 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 vil se at get-forespørselen ble bevisst manipulert for å sikre at det oppstår en feil. Når du kjører programmet, vil du se feilen logget med loggmeldingen vi ønsker.

Noen ganger når du sender en forespørsel til en velkjent treg server, vet du at det kan ta en stund å få svar eller ta noen forsøk på å faktisk få svar fra serveren, kan du sende forespørselen flere ganger før du kaster feilen. Dette kan oppnås med retry-metoden I RxJS, slik at du importerer retry-operatøren, så kan du bruke den inne i røret som den brukes nedenfor:

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

hvis du kjører programmet, bør konsollen se slik ut:

du ser at den først prøver å få svaret, deretter prøver det to ganger, akkurat som vi angav før Du Kaster Feilloggmeldingen.

Det er også svært viktig at forsøket ditt kommer før fangstfeil, slik at feilmeldingen ikke logges etter hvert forsøk.

denne løsningen fungerer perfekt så lenge søknaden din har en tjeneste og sannsynligvis en forespørsel, men når søknaden din er stor og har mange tjenester eller mange flere forespørsler per tjeneste, blir det en ineffektiv løsning. Dette er fordi du må alltid kopiere funksjonen håndtere feil på tvers av tjenester og gjenta koden selv innenfor en tjeneste. Tenk deg minnekostnaden for feilsøking og vedlikehold av kodebasen.

det beste alternativet: Angular HttpInterceptor

Akkurat som navnet sier, Gir Angular et grensesnitt kalt HttpInterceptor som kan fange opp (https://angular.io/api/common/http/HttpRequest) og (https://angular.io/api/common/http/HttpResponse) og skaper en plattform for å håndtere dem. Dette betyr at vi får direkte tilgang til våre serverforespørsler, hva bedre sted å håndtere serverfeil enn her!Syntaksen ser slik ut:

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

for å brukeHttpInterceptor , opprett en ny tjeneste der du vil at interceptor-logikken skal gå inn Med Vinkelklippet.:

 ng generate service services/interceptor

nå har du generert en interceptor-tjeneste, naviger til din app.module.ts fil for å registrere det tilsvarende, slik:

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

Neste trinn er å kvitte seg med all feilhåndteringslogikken i data.service.ts fil, filen skal se slik ut når du er ferdig:

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

kopier koden nedenfor til 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) ) }; }

hvis du kjører programmet, kan du kan se at den logger vår feilmelding og kaster feilen akkurat som vi forventer. Dette er den beste metoden for å håndtere serverfeil i Angular-prosjektet. Du kan teste alle de tre forespørsler på en gang for feil ved tukling med dem. Når du gjør det, vil du finne ut at interceptor fanger dem alle og logger vår melding for hver, det er virkelig fantastisk å se på.

Konklusjon

du har blitt introdusert til ulike måter å håndtere server side feil i Vinkel applikasjoner. Du har også sett når du skal bruke og når du ikke skal bruke HttpClient Med rxjs operatører og hvordan den beste måten er å bruke interceptors. I den neste opplæringen i denne serien vil du bli introdusert for feilsporing. Den komplette koden for denne opplæringen er på GitHub og finner du her. Glad koding!

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.