ebben az oktatóanyagban bemutatjuk a HTTP hibákat a JavaScript-ben, és hogyan kell használni a HttpClient az RxJS hibakezelő operátorokkal, és végül hogyan kell használni a HttpInterceptor

Ez egy mély merülés a http hibakezelés angular 7, érdemes megnézni a bevezető bejegyzést hibakezelés itt.

előfeltételek

ahhoz, hogy végigvigye ezt a bemutató bemutató akkor kellett volna:

  • Node verzió 11.0 telepítve a gépen.
  • Node Package Manager 6.7 verzió (általában a hajók csomópont telepítés).
  • Angular CLI 7.0 verzió
  • az Angular (7-es verzió) legújabb verziója
 // run the command in a terminal ng version

erősítse meg, hogy a 7-es verziót használja, és ha nem, frissítsen 7-re.Egyéb dolgok, amelyek szépek lesznek:

  • A szögletes keret ismerete kezdő szinten.
  • A szögletes szolgáltatások ismerete plusz, de nem követelmény.

Outsider hibák

ezek olyan hibák, amelyeket szerveroldali hibáknak nevezünk, mert elsősorban az Angular alkalmazás kívülről származnak, és a HttpErrorResponse mindig visszatér, amikor előfordulnak. Olyan tulajdonságokkal rendelkezik, mint:

  • hiba neve: ez adja meg a hiba nevét.
  • Hibaüzenet: ez megpróbálja megmagyarázni a hibát egyszerű szavakkal a könnyebb megértés érdekében.
  • hiba állapota: a kiszolgálóoldali hibák minden típusához kód van hozzárendelve, hogy megkülönböztesse a többitől. Ezek a kódok általában háromjegyű kódok, mint például a 400, amely azt jelzi, hogy az elküldött kérés váratlan volt, vagy az 500, amely belső szerver hibát jelez stb.

hibakezelő Angular

Angular egy globális hibakezelési osztály úgynevezett errorHandler, amely egy horog központosított Kivétel kezelése belül az alkalmazás. Alapvetően elfogja az alkalmazásban előforduló összes hibát, és mindegyiket naplózza a konzolra, és megakadályozza az alkalmazás összeomlását.A szintaxis így néz ki:

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

Ez egy nagyszerű módja annak, hogy kezelni hibák Angular, különösen a bennfentes hibák.

A korlátozás errorHandler

ha követte a bevezető utáni itt, látni fogja, hogy a szögletes errorHandler osztály volt a végső megoldás, hogy központosítja a try/catch koncepció hibák alkalmazásunkban. Amikor azonban a szerver oldali hibákra akarunk összpontosítani, rájövünk, hogy az errorHandler osztály nem tud közvetlenül működni az alkalmazásunk HTTP-kéréseivel. A jó hír az, hogy az Angular egyfajta felületet biztosít, ahol az errorHandler osztály koncepcióját használhatja a HTTP kérések közvetlen kezelésére.

1.megoldás: Angular HttpClient

a(https://angular.io/api/common/http/HttpClient)a@angular/common/``(https://angular.io/api/common/http)egyszerűsített kliens HTTP API-t kínál az Angular alkalmazásokhoz, amely a böngészők által kitettXMLHttpRequest felületen nyugszik. A (https://angular.io/api/common/http/HttpClient)további előnyei közé tartoznak a tesztelhetőség jellemzői, A beírt kérés és válasz objektumok, a kérés és válasz lehallgatása, a Observable API-k és az egyszerűsített hibakezelés. Tehát ezt az ügyfelet néhány RxJS operátorral használva egyfajta próbálkozási/Elkapási módot kaphatunk a hibakezeléshez, de ezúttal közvetlenül kommunikálunk a HTTP kérésekkel egy szolgáltatás szögletes alkalmazásán keresztül. Jobban meg fogja érteni a cselekvés során.

Demo

Ez egy demo jsonplaceholder alkalmazás, ahol a jsonplaceholder elérhető adatainak egy része megjelenik a felhasználói felületen, tökéletes szolgáltatás a kiszolgálóval kapcsolatos fogalmak bemutatására. Ha készen áll a bejegyzés elején megadott összes előfeltételre, itt letöltheti a projektet a Githubról. Csomagolja ki és nyissa meg a projektet VS kódban, és használja a terminált a csomópont modulok inicializálásához:

 npm install

most, hogy az alkalmazás fut, először is meg kell győződnie arról, hogy az Angular alkalmazásokhoz szükséges modul bármely szerver szolgáltatás használatához aktív az alkalmazásban. Keresse meg a app.module.ts fájlt, és erősítse meg, hogy van egy ilyen import utasítás:

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

az alkalmazásnak négy összetevője van: Hozzászólások, oldalsáv, részletek és felhasználók. Van egy data service nevű szolgáltatása is, ahol az összes HTTP kérés megtörténik. A data.service.ts fájljának így kell kinéznie:

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

három kérés érkezik a szerverre, most, ha kiválasztod a kérések egyikét, mondjuk getUsers() és hozzá akarod adni a hibakezelést a HttpClient segítségével, akkor:

  • importáld a catchError objektumot az RxJS operátorokból.
  • throwError importálása az RxJS-ből.
  • használja a pipe metódust a kívánt HTTP kérésbe való bevezetéshez.
  • hozzon létre egy módszert a hiba kezelésére

ha ezeket követi, a data.service.ts fájl így fog kinézni:

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

látni fogja, hogy a get kérést szándékosan meghamisították, hogy hiba történjen. Az alkalmazás futtatásakor látni fogja a hibát a kívánt naplóüzenettel naplózva.

néha, amikor kérést küld egy jól ismert lassú szerverre, tudja, hogy eltarthat egy ideig, amíg választ kap, vagy néhány próbálkozás, hogy valóban megkapja a választ a szerverről, többször is elküldheti a kérést, mielőtt eldobná a hibát. Ez az rxjs újrapróbálkozási módszerével érhető el, így importálja az újrapróbálkozási operátort, majd használhatja a csőben, mint az alábbiakban:

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

ha futtatja az alkalmazást, a konzolnak így kell kinéznie:

látja, hogy először megpróbálja megkapni a választ, majd kétszer próbálja meg újra, ahogy a hibanapló üzenet dobása előtt megadtuk.

az is nagyon fontos, hogy az újrapróbálkozás a catchError előtt történjen, hogy a hibaüzenet ne kerüljön naplózásra minden próba után.

Ez a megoldás tökéletesen működik mindaddig, amíg az alkalmazásnak van egy szolgáltatása és valószínűleg egy get kérése, de ha az alkalmazás nagy, és sok szolgáltatással vagy sokkal több kéréssel rendelkezik szolgáltatásonként, akkor nem hatékony megoldássá válik. Ez azért van, mert mindig át kell másolnia a handle error függvényt A szolgáltatások között, és meg kell ismételnie a kódot még egy Szolgáltatáson belül is. Képzelje el a hibakeresés és a kódbázis fenntartásának memóriaköltségét.

A legjobb megoldás: Angular HttpInterceptor

ahogy a neve is mondja, az Angular egy HttpInterceptornevű interfészt biztosít, amely képes elfogni (https://angular.io/api/common/http/HttpRequest)és (https://angular.io/api/common/http/HttpResponse) és létrehoz egy platformot a kezelésükhöz. Ez azt jelenti, hogy közvetlen hozzáférést kapunk a szerver kéréseinkhez, mi lenne jobb hely a szerverhibák kezelésére, mint itt!A szintaxis így néz ki:

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

a HttpInterceptor használatához hozzon létre egy új szolgáltatást, ahol azt szeretné, hogy az interceptor logikája a szögletes CLI-vel menjen be:

 ng generate service services/interceptor

most már létrehozott egy elfogó szolgáltatást, keresse meg a app.module.ts fájlt, hogy ennek megfelelően regisztrálja, mint ez:

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

a következő lépés az, hogy megszabaduljon az összes hibakezelési logikától a data.service.ts fájl, a fájlnak így kell kinéznie, ha végzett:

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

másolja az alábbi kódot a interceptor.service.ts fájl:

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

ha futtatja az alkalmazást, akkor a következő kódot kell láthatjuk, hogy naplózza a hibaüzenetet, és dobja a hiba, ahogy vártuk. Ez a legjobb módszer a kiszolgálói hibák kezelésére az Angular projektben. Mind a három kérést egyszerre tesztelheti hibák esetén, ha meghamisítja őket. Ha igen, akkor megtudja, hogy az interceptor elkapja az összes őket, és naplózza az üzenetet minden, ez tényleg csodálatos nézni.

következtetés

a szögletes alkalmazások kiszolgálóoldali hibáinak kezelésére különböző módszereket vezettek be. Azt is látta, hogy mikor kell használni és mikor nem kell használni a HttpClient az RxJS operátorokkal, és hogyan lehet a legjobban használni az interceptorokat. A sorozat következő bemutatójában bemutatjuk a hibakövetést. Az oktatóanyag teljes kódja a Githubon található, és itt található. Boldog kódolás!

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.