i denne tutorial vil du blive introduceret til HTTP-fejl i JavaScript, og hvordan du bruger HttpClient med rksjs fejlhåndteringsoperatører og endelig hvordan du bruger HttpInterceptor

Dette er et dybt dyk i HTTP-fejlhåndtering i angular 7, Du vil måske tjekke det indledende indlæg om fejlhåndtering her.

forudsætninger

for at kunne følge op i denne tutorial demonstration skal du have:

  • Node version 11.0 installeret på din maskine.
  • Node Package Manager version 6.7 (normalt skibe med Node installation).
  • Angular CLI version 7.0
  • den nyeste version af Angular (version 7)
 // run the command in a terminal ng version

Bekræft, at du bruger version 7, og opdater til 7, hvis du ikke er det.Andre ting, der vil være rart at have, er:

  • et praktisk kendskab til Vinkelrammen på begynderniveau.
  • kendskab til Angular services vil være et plus, men ikke et krav.

Outsider-fejl

Dette er fejl, som vi kalder serversidefejl, fordi de hovedsageligt kommer udefra Vinkelapplikationen og enHttpErrorResponse returneres altid, når som helst de opstår. Det har egenskaber som:

  • Fejlnavn: dette angiver navnet på fejlen.
  • fejlmeddelelse: dette forsøger at forklare fejlen i enkle vendinger for lettere forståelse.
  • fejlstatus: hver type serversidefejl har en kode tildelt den for at differentiere den fra resten. Disse koder er normalt trecifrede koder som 400, hvilket betyder, at den sendte anmodning var uventet eller 500, som signalerer intern serverfejl og så videre.

Fejlhandler i Angular

Angular har en global fejlhåndteringsklasse kaldet errorHandler, der giver en krog til centraliseret undtagelseshåndtering inde i din applikation. Det opfanger dybest set alle de fejl, der sker i din applikation, og logger dem alle til konsollen og forhindrer appen i at gå ned.Syntaksen ser sådan ud:

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

Dette er en fantastisk måde at håndtere fejl i vinkel, især insiderfejlene.

begrænsningen af errorHandler

Hvis du fulgte fra det indledende indlæg her, vil du se, hvordan Angular errorHandler-klassen var den ultimative løsning til at centralisere try / catch-begrebet fejl i vores applikation. Når vi imidlertid ønsker at fokusere på serversidefejl, opdager vi, at errorHandler-klassen ikke kan arbejde direkte med HTTP-anmodninger i vores applikation. Gode nyheder er Angular giver en slags grænseflade, hvor du kan bruge begrebet errorHandler klasse til at håndtere direkte med HTTP-anmodninger.

løsning 1: vinkel HttpClient

(https://angular.io/api/common/http/HttpClient) i @angular/common/``(https://angular.io/api/common/http) tilbyder en forenklet klient HTTP API til Vinkelapplikationer, der hviler på XMLHttpRequest interface eksponeret af bro.sere. Yderligere fordele ved (https://angular.io/api/common/http/HttpClient)inkluderer testbarhedsfunktioner, indtastede anmodnings-og svarobjekter, anmodning og svaraflytning, Observable API ‘ er og strømlinet fejlhåndtering. Så ved at bruge denne klient med nogle rksj-operatører kan vi få en slags prøve/fange måde at fejlhåndtering på, men denne gang kommunikerer vi direkte med HTTP-anmodningerne gennem en Vinkelapplikation i en tjeneste. Du vil forstå det bedre i aktion.

Demo

Dette er en demo jsonplaceholder-applikation, hvor dele af de tilgængelige data på jsonplaceholder vises på brugergrænsefladen, en perfekt service til at demonstrere serverrelaterede koncepter. Hvis du har alle forudsætningerne angivet i begyndelsen af indlægget klar, kan du hente projektet fra GitHub her. Pak ud og åbn projektet i VS-kode, og brug terminalen til at initialisere node-modulerne:

 npm install

nu hvor din applikation er i gang, skal du først og fremmest sikre dig, at det modul, der kræves til Vinkelapplikationer for at bruge enhver servertjeneste, er aktiv i din applikation. Naviger til dinapp.module.ts fil og bekræft, at der er en importerklæring som denne:

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

din applikation har fire komponenter: indlæg, sidebjælke, detaljer og brugere. Det har også en tjeneste kaldet datatjeneste, hvor alle HTTP-anmodninger fremsættes. Din data.service.ts fil skal se sådan ud:

 // 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 anmodninger bliver lavet til serveren, nu hvis du vælger en af disse anmodninger, sigergetUsers() og du vil tilføje fejlhåndtering med HttpClient så vil du:

  • Importer catchError-objektet fra RJS-operatører.
  • Importkastfejl fra Rksj.
  • brug rørmetoden til at introducere den i den ønskede HTTP-anmodning.
  • Opret en metode til at håndtere fejlen

Hvis du følger disse, vil dindata.service.ts fil se sådan ud:

 // 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-anmodningen bevidst blev manipuleret for at sikre, at der opstår en fejl. Når du kører programmet, vil du se fejlen logget med den logmeddelelse, vi ønsker.

Nogle gange når du sender en anmodning til en velkendt langsom server, ved du, at det kan tage et stykke tid at få svar eller tage et par forsøg på faktisk at få svar fra serveren, kan du sende anmodningen et antal gange, før du kaster fejlen. Du kan bruge den inde i røret, som den bruges 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 kører programmet, skal konsollen se sådan ud:

du ser det først forsøger at få svaret, så skal du Forsøg det igen to gange, ligesom vi specificerede, før vi kastede Fejllogmeddelelsen.

det er også meget vigtigt, at din prøve igen kommer før fangstfejlen, så fejlmeddelelsen ikke logges efter hver prøve.

denne løsning fungerer perfekt, så længe din applikation har en service og sandsynligvis en få anmodning, men når din applikation er stor og har mange tjenester eller meget flere anmodninger pr. Dette skyldes, at du altid skal kopiere håndtagsfejlfunktionen på tværs af tjenester og gentage kode, selv inden for en tjeneste. Forestil dig hukommelsesomkostningerne ved fejlfinding og vedligeholdelse af kodebasen.

den bedste løsning: Angular HttpInterceptor

ligesom navnet siger, Angular giver en grænseflade kaldet HttpInterceptor der kan opfange (https://angular.io/api/common/http/HttpRequest) og (https://angular.io/api/common/http/HttpResponse) og skaber en platform til at håndtere dem. Dette betyder, at vi får direkte adgang til vores serveranmodninger, hvilket bedre sted at håndtere serverfejl end her!Syntaksen ser sådan ud:

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

for at brugeHttpInterceptor skal du oprette en ny tjeneste , hvor du vil have din interceptor-logik til at gå ind med den kantede CLI:

 ng generate service services/interceptor

nu har du genereret en interceptor-tjeneste, Naviger til din app.module.ts fil for at registrere den i overensstemmelse hermed, sådan:

 // 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æste trin er at slippe af med al fejlhåndteringslogikken i data.service.ts fil, filen skal se sådan ud, når du er færdig:

 // 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 kører applikationen, skal du bruge den til at kan se, at det logger vores fejlmeddelelse og kaster fejlen, ligesom vi forventer. Dette er den bedste metode til håndtering af serverfejl i dit Vinkelprojekt. Du kan teste alle de tre anmodninger på en gang for fejl ved at manipulere med dem. Når du gør det, vil du finde ud af, at interceptor fanger dem alle og logger vores besked for hver, det er virkelig fantastisk at se.

konklusion

Du er blevet introduceret til forskellige måder at håndtere serversidefejl i dine Vinkelapplikationer. Du har også set, hvornår du skal bruge, og hvornår du ikke skal bruge HttpClient med rksoperatørerne, og hvordan den bedste måde er at bruge interceptors. I den næste tutorial i denne serie vil du blive introduceret til fejlsporing. Den komplette kode til denne tutorial er på GitHub og kan findes her. Glad kodning!

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.