În acest tutorial, veți fi introdus erori HTTP în JavaScript și cum să utilizați HttpClient cu operatorii de manipulare a erorilor RxJS și, în final, cum să utilizați HttpInterceptor

aceasta este o scufundare profundă în manipularea erorilor http în Angular 7, poate doriți să consultați postarea introductivă despre manipularea erorilor aici.

cerințe preliminare

pentru a putea urmări demonstrația acestui tutorial, ar trebui să aveți:

  • Node version 11.0 instalat pe mașina dvs.
  • Node Package Manager versiunea 6.7 (de obicei, navele cu instalare nod).
  • Angular CLI versiunea 7.0
  • cea mai recentă versiune de Angular (versiunea 7)
 // run the command in a terminal ng version

confirmați că utilizați versiunea 7 și actualizați la 7 dacă nu sunteți.Alte lucruri care vor fi frumoase sunt:

  • o cunoaștere de lucru a cadrului unghiular la un nivel începător.
  • familiarizarea cu serviciile Angular va fi un plus, dar nu o cerință.

erori Outsider

acestea sunt erori pe care le numim erori din partea serverului, deoarece provin în principal din exteriorul aplicației unghiulare și unHttpErrorResponse este întotdeauna returnat oricând apar. Are proprietăți precum:

  • nume eroare: aceasta indică numele erorii.
  • mesaj de eroare: acest lucru încearcă să explice eroarea în termeni simpli pentru o înțelegere mai ușoară.
  • stare eroare: fiecare tip de eroare din partea serverului are un cod atribuit pentru a-l diferenția de restul. Aceste coduri sunt de obicei coduri de trei cifre, cum ar fi 400 care, semnifică solicitarea trimisă a fost neașteptată sau 500 care, semnalează eroarea internă a serverului și așa mai departe.

error handler în Angular

Angular are o clasă globală de manipulare a erorilor numită errorHandler care oferă un cârlig pentru manipularea centralizată a excepțiilor în interiorul aplicației. Practic interceptează toate erorile care se întâmplă în aplicația dvs. și le conectează pe toate la consolă și oprește aplicația să se prăbușească.Sintaxa arată astfel:

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

aceasta este o modalitate excelentă de a gestiona erorile în unghiular, în special erorile din interior.

limitarea errorHandler

dacă ați urmat de la postul introductiv aici, veți vedea cum clasa Errorhandler unghiulară a fost soluția finală pentru centralizarea conceptului try / catch de erori în aplicația noastră. Cu toate acestea, atunci când dorim să ne concentrăm asupra erorilor din partea serverului, descoperim că clasa errorHandler nu poate funcționa direct cu cererile HTTP din aplicația noastră. Vestea bună este că Angular oferă un fel de interfață în care puteți utiliza conceptul clasei errorHandler pentru a face față direct cererilor HTTP.

soluția 1: Angular HttpClient

(https://angular.io/api/common/http/HttpClient) în@angular/common/``(https://angular.io/api/common/http) oferă un API HTTP client simplificat pentru aplicații angulare care se bazează peXMLHttpRequest interfață expusă de browsere. Beneficiile suplimentare ale (https://angular.io/api/common/http/HttpClient)includ caracteristici de testabilitate, obiecte de solicitare și răspuns tastate, interceptare cerere și răspuns, Observable API-uri și gestionarea erorilor raționalizate. Deci, folosind acest client cu unii operatori RxJS, putem obține un fel de încercare/captură mod de manipulare a erorilor, dar de data aceasta comunicarea directă cu cererile HTTP printr-o aplicație unghiulară într-un serviciu. Veți înțelege mai bine în acțiune.

Demo

aceasta este o aplicație jsonplaceholder demo în cazul în care părți ale datelor disponibile pe jsonplaceholder este afișat pe interfața cu utilizatorul, un serviciu perfect pentru a demonstra concepte legate de server. Dacă aveți toate condițiile prealabile menționate la începutul postării gata, puteți descărca proiectul de la GitHub aici. Dezarhivați și deschideți proiectul în codul VS și utilizați terminalul pentru a inițializa modulele nodului:

 npm install

acum că aplicația dvs. este în funcțiune, trebuie să vă asigurați în primul rând că modulul necesar aplicațiilor Angular pentru a utiliza orice serviciu server este activ în aplicația dvs. Navigați la fișierul app.module.ts și confirmați că există o declarație de import ca aceasta:

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

aplicația dvs. are patru componente: postări, bara laterală, detalii și utilizatori. De asemenea, are un serviciu numit serviciu de date în care sunt făcute toate solicitările HTTP. Fișierul dvs. data.service.ts ar trebui să arate astfel:

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

trei cereri sunt făcute la server, acum, dacă alegeți una dintre aceste cereri, spunegetUsers() și doriți să adăugați eroare de manipulare cu HttpClient atunci va:

  • Import obiect catchError de la operatorii RxJS.
  • throwError Import de la RxJS.
  • utilizați metoda pipe pentru ao introduce în cererea HTTP dorită.
  • creați o metodă pentru a gestiona eroarea

dacă urmați aceste, fișierul data.service.ts va arăta astfel:

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

veți vedea că cererea get a fost modificată în mod deliberat pentru a se asigura că apare o eroare. Când rulați aplicația, veți vedea eroarea înregistrată cu mesajul de jurnal dorit.

uneori, atunci când trimiteți o cerere la un server lent bine cunoscut, știi că ar putea dura un timp pentru a obține răspuns sau de a lua câteva încercări de a obține de fapt răspuns de la server, puteți retrimite cererea de mai multe ori înainte de a arunca eroarea. Acest lucru poate fi realizat cu metoda Reîncercare în RxJS, astfel încât să importați operatorul Reîncercare, atunci îl puteți folosi în interiorul conductei ca este folosit mai jos:

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

dacă rulați aplicația, Consola ar trebui să arate astfel:

veți vedea mai întâi încearcă să încearcă din nou de două ori așa cum am specificat înainte de a arunca mesajul Jurnalului de erori.

de asemenea, este foarte important ca reîncercarea dvs. să vină înainte de catchError, astfel încât mesajul de eroare să nu fie înregistrat după fiecare încercare.

această soluție funcționează perfect atât timp cât aplicația dvs. are un serviciu și probabil o cerere get, dar când aplicația dvs. este mare și are multe servicii sau mult mai multe cereri pe serviciu, devine o soluție ineficientă. Acest lucru se datorează faptului că trebuie să copiați întotdeauna funcția de eroare a mânerului între servicii și să repetați codul chiar și în cadrul unui serviciu. Imaginați-vă costul de memorie de depanare și menținerea codebase.

cea mai bună opțiune: Angular HttpInterceptor

la fel cum spune și numele, Angular oferă o interfață numităHttpInterceptor care poate intercepta(https://angular.io/api/common/http/HttpRequest) și(https://angular.io/api/common/http/HttpResponse) și creează o platformă pentru a le gestiona. Acest lucru înseamnă că avem acces direct la cererile noastre de server, ce loc mai bun pentru a face față erorilor de server decât aici!Sintaxa arată astfel:

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

pentru a utilizaHttpInterceptor , creați un nou serviciu în care doriți ca logica interceptorului să intre cu CLI unghiular:

 ng generate service services/interceptor

acum ați generat un serviciu de interceptare, navigați la fișierulapp.module.ts pentru a-l înregistra în consecință, astfel:

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

următorul pas este să scăpați de toată logica de manipulare a erorilor dindata.service.ts fișier, fișierul ar trebui să arate ca acest lucru atunci când ați terminat:

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

copiați codul de mai jos îninterceptor.service.ts fișier:

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

dacă executați aplicația, trebuie să se poate vedea că se înregistrează mesajul nostru de eroare și aruncă eroarea la fel cum ne așteptăm. Aceasta este cea mai bună metodă de manipulare a erorilor serverului în proiectul dvs. Angular. Puteți testa toate cele trei cereri simultan pentru erori prin manipularea acestora. Când faceți acest lucru, veți afla că interceptorul îi prinde pe toți și înregistrează mesajul nostru pentru fiecare, este cu adevărat uimitor de urmărit.

concluzie

ați fost introdus în diferite moduri de a gestiona erorile din partea serverului în aplicațiile dvs. unghiulare. De asemenea, ați văzut când să utilizați și când să nu utilizați HttpClient cu operatorii RxJS și cum cel mai bun mod este utilizarea interceptorilor. În următorul tutorial din această serie, veți fi introdus în urmărirea erorilor. Codul complet pentru acest tutorial este pe GitHub și poate fi găsit aici. Codificare fericit!

Lasă un răspuns

Adresa ta de email nu va fi publicată.