tässä opetusohjelmassa esitellään http errors in JavaScript, and how to use the HttpClient with rxjs error handling operators and finally how to use the HttpInterceptor

tämä on syväsukellus http-virheenkäsittelyyn kulmikas 7: ssä, kannattaa tarkistaa johdantopostaus virheenkäsittelystä täältä.

edellytykset

jotta tämän opetusohjelman demonstraation voisi toteuttaa, pitäisi olla:

  • Solmuversio 11.0 asennettu koneellesi.
  • Solmupaketinhallinnan versio 6.7 (toimitetaan yleensä Solmuasennuksella).
  • Angular CLI version 7.0
  • uusin versio Angular (versio 7)
 // run the command in a terminal ng version

Vahvista, että käytät versiota 7, ja päivitä numeroon 7, Jos et ole.Muita mukavia asioita ovat:

  • toimivaa tietoa kulmikkaasta kehyksestä aloittelijatasolla.
  • perehtyneisyys Kulmapalveluihin on plussaa, mutta ei vaatimusta.

ulkopuoliset virheet

nämä ovat virheitä, joita kutsumme palvelinpuolen virheiksi, koska ne tulevat pääasiassa Kulmasovelluksen ulkopuolelta ja HttpErrorResponse palautetaan aina, kun niitä ilmenee. Sillä on ominaisuuksia, kuten:

  • Virhenimi: tämä kertoo virheen nimen.
  • virheviesti: tämä pyrkii selittämään virheen yksinkertaisesti, jotta se olisi helpompi ymmärtää.
  • virhetila: jokaiselle palvelinpuolen virheelle on annettu koodi, joka erottaa sen muista. Nämä koodit ovat yleensä kolminumeroisia koodeja, kuten 400, joka merkitsee lähetettyä pyyntöä odottamattomana tai 500, joka viestii sisäisestä palvelimen virheestä ja niin edelleen.

Virheenkäsittelijällä Kulmikkaassa

Kulmikkaassa on globaali virheenkäsittelyluokka nimeltä errorHandler, joka tarjoaa koukun keskitettyyn poikkeusten käsittelyyn sovelluksen sisällä. Se periaatteessa sieppaa kaikki virheet, jotka tapahtuvat sovelluksessa, ja kirjaa ne kaikki konsoliin, ja estää sovelluksen kaatumisen.Syntaksi näyttää tältä:

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

Tämä on hyvä tapa käsitellä kulmikkaiden, erityisesti sisäpiirivirheiden virheitä.

errorhandlerin rajoittaminen

Jos seurasit tästä johdantopostauksesta, näet, miten Kulmikas errorHandler-luokka oli lopullinen ratkaisu virheiden try / catch-käsitteen keskittämiseen sovelluksessamme. Kun kuitenkin haluamme keskittyä palvelinpuolen virheisiin, huomaamme, että errorHandler-luokka ei voi toimia suoraan HTTP-pyyntöjen kanssa sovelluksessamme. Hyvä uutinen on kulmikas tarjoaa eräänlaisen käyttöliittymän, jossa voit käyttää errorhandler-luokan käsitettä käsittelemään suoraan HTTP-pyyntöjä.

ratkaisu 1: Kulmikas HttpClient

(https://angular.io/api/common/http/HttpClient) in @angular/common/``(https://angular.io/api/common/http) tarjoaa Kulmasovelluksille yksinkertaistetun asiakkaan HTTP-API: n, joka perustuu XMLHttpRequest selainten paljastamaan käyttöliittymään. (https://angular.io/api/common/http/HttpClient)lisäetuja ovat muun muassa testattavuusominaisuudet, tyypitetyt pyyntö-ja vastausobjektit, pyynnön ja vastauksen sieppaus, Observable sovellusliittymät ja virtaviivainen virheiden käsittely. Joten käyttämällä tätä asiakasta joidenkin RxJS-operaattoreiden kanssa voimme saada eräänlaisen try / catch-tavan virheiden käsittelyyn, mutta tällä kertaa suoraan kommunikoimaan HTTP-pyyntöjen kanssa kulmikkaan sovelluksen kautta palvelussa. Ymmärrät sen paremmin toiminnassa.

Demo

Tämä on demo jsonplaceholder-sovellus, jossa osa jsonplaceholderista saatavilla olevista tiedoista näkyy käyttöliittymässä, täydellinen palvelu demonstroimaan palvelimiin liittyviä käsitteitä. Jos sinulla on kaikki postauksen alussa mainitut edellytykset valmiina, voit ladata projektin Githubista täältä. Pura ja avaa projekti VS-koodissa ja käytä päätettä solmumoduulien alustamiseen:

 npm install

nyt kun sovelluksesi on toiminnassa, sinun on ennen kaikkea varmistettava, että minkä tahansa palvelinpalvelun käyttämiseksi Angular-sovelluksille tarvittava moduuli on aktiivinen sovelluksessasi. Siirry app.module.ts – tiedostoon ja vahvista, että on olemassa tällainen tuontilauseke:

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

sovelluksessasi on neljä komponenttia: viestit, sivupalkki, yksityiskohdat ja käyttäjät. Sillä on myös datapalvelu-niminen palvelu, jossa kaikki HTTP-pyynnöt tehdään. data.service.ts tiedoston pitäisi näyttää tältä:

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

palvelimelle on tehty kolme pyyntöä, nyt jos valitset yhden näistä pyynnöistä, sano getUsers() ja haluat lisätä virhekäsittelyn Httpclientillä niin tuot:

  • catchError-objektin rxjs-operaattoreilta.
  • tuo throwError rxjs: ltä.
  • käytä putkimenetelmää esittääksesi sen halutussa HTTP-pyynnössä.
  • luo menetelmä virheen käsittelemiseksi

Jos noudatat näitä, data.service.ts tiedosto näyttää tältä:

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

näet, että get-pyyntöä on tahallaan peukaloitu virheen varmistamiseksi. Kun suoritat sovelluksen, näet virheen kirjattuna haluamallamme lokiviestillä.

joskus kun lähetät pyynnön tunnetulle hitaalle palvelimelle, tiedät, että vastauksen saaminen voi kestää jonkin aikaa tai kestää muutaman yrityksen saada vastaus palvelimelta, voit lähettää pyynnön uudelleen useita kertoja ennen virheen heittämistä. Tämä voidaan saavuttaa uudelleenyritysmenetelmällä RxJS: ssä, joten tuot uudelleenyritysoperaattorin sitten voit käyttää sitä putken sisällä kuten sitä käytetään alla:

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

Jos suoritat sovelluksen, konsolin pitäisi näyttää tältä:

näet sen ensin yrittävän saada vastauksen, sitten toistaa sen kahdesti aivan kuten määritimme ennen virhelokiviestin heittämistä.

on myös erittäin tärkeää, että uusintayritys tulee ennen virhevirhettä, jotta virheilmoitusta ei kirjata jokaisen kokeilun jälkeen.

tämä ratkaisu toimii täydellisesti niin kauan kuin sovelluksellasi on yksi palvelu ja luultavasti yksi get request, mutta kun hakemuksesi on suuri ja sillä on monia palveluita tai paljon enemmän pyyntöjä per palvelu, siitä tulee tehoton ratkaisu. Tämä johtuu siitä, että sinun täytyy aina kopioida handle error-toiminto eri palveluissa ja toistaa koodi jopa palvelun sisällä. Kuvittele muistikustannukset virheenkorjaus ja ylläpitää codebase.

paras vaihtoehto: Angular HttpInterceptor

aivan kuten nimikin sanoo, Angular tarjoaa HttpInterceptor rajapinnan, joka voi siepata (https://angular.io/api/common/http/HttpRequest) ja (https://angular.io/api/common/http/HttpResponse) ja luo alustan niiden käsittelemiseksi. Tämä tarkoittaa, että saamme suoran pääsyn palvelinpyyntöihimme, mikä olisikaan parempi paikka käsitellä palvelinvirheitä kuin täällä!Syntaksi näyttää tältä:

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

käyttääksesi HttpInterceptor, Luo uusi palvelu, jossa haluat interceptorilogiikkasi menevän sisään kulmikkaan CLI:

 ng generate service services/interceptor

nyt olet luonut torjuntahävittäjäpalvelun, siirry app.module.ts tiedosto rekisteröimään se vastaavasti, näin:

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

seuraava askel on päästä eroon kaikesta virheenkäsittelylogiikasta data.service.ts tiedosto, tiedoston pitäisi näyttää tältä, kun olet valmis:

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

kopioi alla oleva koodi interceptor.service.ts tiedosto:

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

Jos suoritat sovelluksen, voit voi nähdä, että se kirjaa virheilmoituksen ja heittää virhe aivan kuten odotamme. Tämä on paras tapa käsitellä Palvelinvirheitä Angular-projektissasi. Voit testata kaikki kolme pyyntöä kerralla virheiden varalta peukaloimalla niitä. Kun teet, huomaat, että interceptor saaliit ne kaikki ja kirjaa viestimme jokaiselle, se on todella hämmästyttävää katsella.

johtopäätös

sinulle on esitelty erilaisia tapoja käsitellä palvelinpuolen virheitä Kulmikkaissa sovelluksissasi. Olet myös nähnyt, milloin HttpClient rxjs-operaattoreiden kanssa kannattaa käyttää ja milloin ei, ja miten paras tapa on käyttää torjuntahävittäjiä. Seuraavassa opetusohjelma tässä sarjassa, sinulle esitellään virhe seuranta. Täydellinen koodi tämän opetusohjelman on GitHub ja löytyy täältä. Hyvää koodausta!

Vastaa

Sähköpostiosoitettasi ei julkaista.