In diesem Tutorial werden Sie in HTTP-Fehler in JavaScript eingeführt und wie Sie die HttpClient mit RxJS-Fehlerbehandlungsoperatoren verwenden und schließlich die HttpInterceptor

Dies ist ein tiefer Einblick in die HTTP-Fehlerbehandlung in Angular 7. Vielleicht möchten Sie den einleitenden Beitrag zur Fehlerbehandlung hier lesen.

Voraussetzungen

Um die Demonstration dieses Tutorials durchführen zu können, sollten Sie:

  • Node Version 11.0 auf Ihrem Computer installiert haben.
  • Node Package Manager Version 6.7 (wird normalerweise mit der Node-Installation ausgeliefert).
  • Angular CLI Version 7.0
  • Die neueste Version von Angular (Version 7)
 // run the command in a terminal ng version

Bestätigen Sie, dass Sie Version 7 verwenden, und aktualisieren Sie auf 7, falls nicht.Andere Dinge, die Nice-to-Haves sein werden, sind:

  • Kenntnisse des Angular-Frameworks auf Anfängerniveau.
  • Vertrautheit mit Angular-Diensten ist ein Plus, aber keine Voraussetzung.

Outsider-Fehler

Dies sind Fehler, die wir serverseitige Fehler nennen, weil sie hauptsächlich von außerhalb der Angular-Anwendung kommen und ein HttpErrorResponse immer zurückgegeben wird, wenn sie auftreten. Es hat Eigenschaften wie:

  • Error name: Dies gibt den Namen des Fehlers an.
  • Fehlermeldung: Hier wird versucht, den Fehler zum leichteren Verständnis in einfachen Worten zu erklären.
  • Fehlerstatus: jeder Art von serverseitigem Fehler ist ein Code zugewiesen, um ihn von den anderen zu unterscheiden. Diese Codes sind normalerweise dreistellige Codes wie 400, was bedeutet, dass die gesendete Anfrage unerwartet war, oder 500, was einen internen Serverfehler signalisiert und so weiter.

Fehlerbehandlung in Angular

Angular verfügt über eine globale Fehlerbehandlungsklasse namens ErrorHandler , die einen Hook für die zentrale Ausnahmebehandlung in Ihrer Anwendung bereitstellt. Es fängt im Grunde alle Fehler ab, die in Ihrer Anwendung auftreten, protokolliert sie alle auf der Konsole und verhindert, dass die App abstürzt.Die Syntax sieht folgendermaßen aus:

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

Dies ist eine großartige Möglichkeit, Fehler in Angular zu behandeln, insbesondere die Insider-Fehler.

Die Einschränkung von ErrorHandler

Wenn Sie dem einleitenden Beitrag hier gefolgt sind, werden Sie sehen, wie die Angular ErrorHandler-Klasse die ultimative Lösung für die Zentralisierung des Try / Catch-Konzepts von Fehlern in unserer Anwendung war. Wenn wir uns jedoch auf serverseitige Fehler konzentrieren möchten, stellen wir fest, dass die ErrorHandler-Klasse nicht direkt mit HTTP-Anforderungen in unserer Anwendung arbeiten kann. Eine gute Nachricht ist, dass Angular eine Art Schnittstelle bietet, über die Sie das Konzept der ErrorHandler-Klasse verwenden können, um direkt mit HTTP-Anforderungen umzugehen.

Lösung 1: Angular HttpClient

Die (https://angular.io/api/common/http/HttpClient) in @angular/common/``(https://angular.io/api/common/http) bietet eine vereinfachte Client-HTTP-API für Angular-Anwendungen, die auf der XMLHttpRequest Schnittstelle basiert, die von Browsern bereitgestellt wird. Weitere Vorteile von (https://angular.io/api/common/http/HttpClient)sind Testbarkeitsfunktionen, typisierte Anforderungs- und Antwortobjekte, Abfangen von Anforderungen und Antworten, Observable APIs und optimierte Fehlerbehandlung. Wenn wir diesen Client mit einigen RxJS-Operatoren verwenden, können wir eine Art Try / Catch-Methode zur Fehlerbehandlung erhalten, diesmal jedoch direkt mit den HTTP-Anforderungen über eine Angular-Anwendung in einem Dienst kommunizieren. Sie werden es in Aktion besser verstehen.

Demo

Dies ist eine Demo-Jsonplaceholder-Anwendung, bei der Teile der verfügbaren Daten auf dem jsonplaceholder auf der Benutzeroberfläche angezeigt werden. Wenn Sie alle am Anfang des Beitrags genannten Voraussetzungen erfüllt haben, können Sie das Projekt hier von GitHub herunterladen. Entpacken und öffnen Sie das Projekt in VS Code und verwenden Sie das Terminal, um die Knotenmodule zu initialisieren:

 npm install

Jetzt, da Ihre Anwendung ausgeführt wird, müssen Sie in erster Linie sicherstellen, dass das Modul, das für Angular-Anwendungen zur Verwendung eines Serverdienstes erforderlich ist, in Ihrer Anwendung aktiv ist. Navigieren Sie zu Ihrer app.module.ts -Datei und bestätigen Sie, dass eine Importanweisung wie diese vorliegt:

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

Ihre Anwendung besteht aus vier Komponenten: posts, sidebar, details und users. Es hat auch einen Dienst namens Data Service, bei dem alle HTTP-Anforderungen gestellt werden. Ihre data.service.ts -Datei sollte folgendermaßen aussehen:

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

Drei Anfragen werden an den Server gestellt. Wenn Sie nun eine dieser Anfragen auswählen, sagen Sie getUsers() und Sie möchten eine Fehlerbehandlung mit dem HttpClient hinzufügen, dann werden Sie:

  • Importieren Sie das catchError Objekt von RxJS Operatoren.
  • Import throwError von RxJS.
  • Verwenden Sie die Pipe-Methode, um sie in die gewünschte HTTP-Anforderung einzuführen.
  • Erstellen Sie eine Methode, um den Fehler zu behandeln

Wenn Sie diesen Anweisungen folgen, sieht Ihre data.service.ts -Datei folgendermaßen aus:

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

Sie werden sehen, dass die get-Anforderung absichtlich manipuliert wurde, um sicherzustellen, dass ein Fehler auftritt. Wenn Sie die Anwendung ausführen, wird der Fehler mit der gewünschten Protokollmeldung protokolliert.

Manchmal, wenn Sie eine Anfrage an einen bekannten langsamen Server senden, wissen Sie, dass es eine Weile dauern kann, eine Antwort zu erhalten, oder ein paar Versuche, um tatsächlich eine Antwort vom Server zu erhalten, können Sie die Anfrage einige Male erneut senden, bevor Sie den Fehler auslösen. Dies kann mit der Retry-Methode in RxJS erreicht werden, sodass Sie den Retry-Operator importieren und ihn dann in der Pipe verwenden können, wie er unten verwendet wird:

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

Wenn Sie die Anwendung ausführen, sollte die Konsole folgendermaßen aussehen:

Sie sehen, dass sie zuerst versucht, die Antwort abzurufen, und sie dann zweimal so wie wir es vor dem Auslösen der Fehlerprotokollmeldung angegeben haben.

Es ist auch sehr wichtig, dass Ihre Wiederholung vor dem catchError damit die Fehlermeldung nicht nach jedem Versuch protokolliert wird.

Diese Lösung funktioniert einwandfrei, solange Ihre Anwendung über einen Dienst und wahrscheinlich eine Get-Anforderung verfügt. Dies liegt daran, dass Sie die Funktion Fehler behandeln immer dienstübergreifend kopieren und Code auch innerhalb eines Dienstes wiederholen müssen. Stellen Sie sich die Speicherkosten für das Debuggen und Verwalten der Codebasis vor.

Die beste Option: Angular HttpInterceptor

Genau wie der Name schon sagt, bietet Angular eine Schnittstelle namens HttpInterceptor , die (https://angular.io/api/common/http/HttpRequest) und (https://angular.io/api/common/http/HttpResponse) und erstellt eine Plattform, um sie zu verarbeiten. Dies bedeutet, dass wir direkten Zugriff auf unsere Serveranfragen erhalten, welchen besseren Ort gibt es, um mit Serverfehlern umzugehen, als hier!Die Syntax sieht folgendermaßen aus:

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

Um die HttpInterceptor Zu verwenden, erstellen Sie einen neuen Dienst, in den Ihre Interceptorlogik mit der Angular CLI eingefügt werden soll:

 ng generate service services/interceptor

Nachdem Sie einen Interceptor-Dienst generiert haben, navigieren Sie zu Ihrer app.module.ts -Datei, um sie entsprechend zu registrieren:

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

Der nächste Schritt besteht darin, die gesamte Fehlerbehandlungslogik in der data.service.ts datei, die Datei sollte so aussehen, wenn Sie fertig sind:

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

Kopieren Sie den folgenden Code in die interceptor.service.ts Datei:

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

Wenn Sie die Anwendung ausführen, können Sie sehen, dass sie unsere Fehlermeldung protokolliert und den Fehler wie erwartet ausgibt. Dies ist die beste Methode zur Behandlung von Serverfehlern in Ihrem Angular-Projekt. Sie können alle drei Anforderungen gleichzeitig auf Fehler testen, indem Sie sie manipulieren. Wenn Sie dies tun, werden Sie feststellen, dass der Abfangjäger alle abfängt und unsere Nachricht für jeden protokolliert.

Fazit

Sie haben verschiedene Möglichkeiten kennengelernt, mit serverseitigen Fehlern in Ihren Angular-Anwendungen umzugehen. Sie haben auch gesehen, wann Sie die HttpClient mit den RxJS-Operatoren verwenden und wann nicht und wie Sie Interceptors am besten verwenden. Im nächsten Tutorial dieser Serie werden Sie in die Fehlerverfolgung eingeführt. Der vollständige Code für dieses Tutorial ist auf GitHub und kann hier gefunden werden. Glückliche Codierung!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.