Fehlerbehandlung in Angular

Blog

Ebenso wichtig ist die Fehlerbehandlung in der Softwareentwicklung mit einer funktionierenden Anwendung. Um eine vollständige und robuste Anwendung zu haben, müssen Fehler und Ausnahmen richtig behandelt werden. Der Umgang mit Fehlern ist eine Möglichkeit, Ihren Benutzern zu sagen, hey Alter! Beruhige dich, hier ist das Problem und hier ist der Ausweg, Gewissheit, ja? :).



In diesem Tutorial werde ich Sie durch den effizienten Umgang mit Fehlern in Ihrer Angular-Anwendung führen. Ich werde die neueste Version von verwenden Winkel 7.0.4 für dieses Tutorial und ich werde Ihnen raten, dasselbe zu verwenden.

Voraussetzungen



Für dieses Tutorial muss Folgendes auf Ihrem System verfügbar sein;




  1. Knoten installieren
  • Gehe zu nodejs
  • Laden Sie die verfügbare LTS-Version herunter und installieren Sie sie.
  • Um Ihre Version zu überprüfen, führen Sie den Knoten -v in einem Terminal-/Konsolenfenster aus.
  1. Angular-CLI . installieren
${ this.base_Url }/random
  1. Bashcopy
  2. Visual Studio-Code. ich benutze VSCode aber Sie können wählen, ob Sie eine andere verwenden möchten HIER (Winkel-IDE , Atom, Vim usw.)

Wenn alle diese Voraussetzungen erfüllt sind, können wir damit beginnen, einen neuen Ordner für unsere Anwendung zu erstellen.

  • Öffnen Sie den Ordner in VSCode, indem Sie mit der rechten Maustaste in den Ordner klicken und mit VSCode öffnen.
  • Öffnen Sie das VsCode-Terminal und erstellen Sie ein neues Winkelprojekt
${this.base_Url}/random
  • Bashcopy
  • Der Befehl ng new fordert Sie auf, Informationen zu Funktionen einzugeben, die in das anfängliche App-Projekt aufgenommen werden sollen. Akzeptieren Sie die Standardeinstellungen, indem Sie die Eingabetaste oder die Eingabetaste drücken.
  • Cd in den Projektordner cd myErrorHandlingApp
  • Stellen Sie die Anwendung lokal bereit.
${this.base_Url}/random
  • Bashcopy

Dadurch wird die Anwendung in Ihrem lokalen Browser auf localhost:4200 geöffnet, Sie sollten dies sehen

Fehler in der Angular-Anwendung kann entweder ein clientseitiger Fehler oder ein serverseitiger Fehler sein;

  • Clientseitiger Fehler: Dies sind Fehler im Zusammenhang mit dem Front-End-Code und dem Netzwerk, sie geben 4xx-Statuscodes aus.
  • Serverseitiger Fehler: Dies sind Fehler im Zusammenhang mit Back-End-Codes, Datenbank und Dateisystem. Sie werfen normalerweise 5xx-Statuscodes.

Für die Zwecke dieses Tutorials werden wir die Fehlerbehandlung demonstrieren, indem wir konsumieren Chuck Norris API zum Anzeigen zufälliger Witze mit dem integrierten HttpClientModule von Angular.


Wir beginnen mit dem Importieren von HttpClientModule in unser Root-Modul (app.module.ts).

Error: ${err.message}

In app.component.html erstellen wir eine Schaltfläche, die beim Klicken eine http-Anfrage initiiert.

Unternehmen, die Rost verwenden

In app.component.ts binden wir unsere Konstruktorfunktion ein und erweitern die Klasse der Komponente, um den OnInit-Lifecycle-Hook zu implementieren.

Error Code: ${err.status} Message: ${err.message}

Jetzt müssen wir einen Dienst erstellen, bei dem wir unsere http-Anfrage stellen. Service ist ein sehr wichtiger Bestandteil von Angular. Wenn wir Codes benötigen, die überall in der Anwendung verwendet werden sollen, oder wir Daten über die Anwendung übertragen müssen, sind Dienste praktisch.

Error: ${err.message}

JsCopy

Dadurch wird ein neuer Injectable-Dienst erstellt, der in alle unsere Komponenten injiziert werden kann. Wir sollten dies jetzt in unserem Ordnerbaum haben.

Nach dem Erstellen des Dienstes injizieren wir den Dienst in den App-Komponenten-Controller (Datei app.component.ts). Beachten Sie, wie der appService in die Komponente importiert wird.

Error Code: ${err.status} Message: ${err.message}

Im appService werden wir unsere http-Anfrage stellen, um die offene API von Norris zu sperren, um zufällige Witze zu erhalten.

 npm i -g @angular/cli 

Also, was habe ich getan?

  • Ich setze die Basis-URL für unsere API auf ‘ https://api.chucknorris.io/jokes ’
  • Ich habe den HttpClient-Dienst als private Variable in die Konstruktorfunktion eingefügt. Hinweis Sie müssen HttpClientModule in app.module.ts von ‘@angular/common/http.
  • Ich habe ein getJokes erstellt, das die Methode http get aufruft, um zufällige Witze abzurufen. Dies wird als Observables zurückgegeben.
  • In der Methode ExtractJokes abonniere ich das Jokes Observable und protokolliere es auf der Konsole.

Also, was habe ich getan?

Nun, ich denke, als nächstes müssen wir die Methode ExtractJokes vom Controller aus aufrufen, wenn Sie auf die Schaltfläche klicken. Fügen Sie dies in der makeApi-Methode ein;

 ng new my-ErrorHandling-app 

JsCopy

Speichern Sie nun Ihren Code und klicken Sie auf die Schaltfläche, Sie sollten ein Witzobjekt auf der Konsole Ihres Browsers sehen.

einen geschützten Twitter-Account anzeigen

Funktioniert gut oder? :)

Wir sind mit der Bewerbung fertig und versandfertig. Oh, Moment mal!!! Was passiert, wenn bei unserer http-Anfrage ein Fehler auftritt, wie informieren wir den Benutzer über den Fehler, wie gehen wir damit um.

Nun gibt es viele Möglichkeiten, dies zu tun. Lassen Sie uns im nächsten Kapitel dieses Tutorials einige davon untersuchen.

FEHLERBEHANDLUNG

1.Wir können einen Fehlerhandler verwenden, der den Benutzer auf den Fehler aufmerksam macht

 ng serve -o  
  1. Ich habe eine neue handleError-Methode erstellt, die den Benutzer auf den Fehler aufmerksam macht, ich habe auch ein zweites Argument hinzugefügt, das den Fehler aufnimmt, in der Browserkonsole protokolliert und die handleError-Funktion mit dem als Argument übergebenen Fehler aufruft.
  2. Lassen Sie uns nun ein Fehlerszenario simulieren, Ihren Browser offline nehmen und auf die Schaltfläche zum Testen klicken.
  3. Beachten Sie, wie ich meinen Browser offline geschaltet habe. Sie sollten eine solche Benachrichtigung erhalten

Dies sagt uns, dass eine HTTP-Fehlerantwort vorliegt. Jetzt weiß der Benutzer über den Fehler Bescheid, besser, ja? J, aber wir können es besser machen.

Lassen Sie uns nun unseren Code neu jigieren. Beginnend mit der getJokes-Methode in unserem Service.

 import { BrowserModule } from ‘@angular/platform-browser’;  
import { NgModule } from ‘@angular/core’;
import { HttpClientModule } from ‘@angular/common/http’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

JsCopy

Wir müssen die Operatoren retry und catchError aus rxjs/operators importieren. retry hilft uns, die HTTP-Anforderung so oft wie angegeben zu wiederholen, bevor ein Fehler ausgegeben wird. catchError wird den Fehler an den Benutzer ausgeben.

Ändern Sie nun die Methoden getJokes, ExtractJokes und handleError wie unten gezeigt;

  
import {Component, OnInit} from ‘@angular/core’;

@Component ({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent implements OnInit {
title = ‘my-app’;
constructor () {}

makeApiCall () {
}

ngOnInit () {}
}

Denken Sie daran, dass ich bereits erwähnt habe, dass Fehler entweder Client- oder Serverfehler sein können, also müssen wir den Fehler abfangen, der auftritt. Jedes Mal, wenn wir auf die Schaltfläche klicken, um die http-Anfrage zu stellen, haben wir alle auftretenden Fehler erfolgreich behandelt.


Die zweite Möglichkeit der Fehlerbehandlung ist die Verwendung von HttpInterceptor, das mit Angular 4.3.1 eingeführt wurde. HttpInterceptor wird verwendet, um alle HTTP-Anfragen und -Antworten abzufangen und optional umzuwandeln. HttpInterceptor ist eine Schnittstelle, die von einer Klasse implementiert werden kann. Sie verfügt über eine Intercept-Methode, die die gesamte zu implementierende Logik übernimmt, wenn die HTTP-Anforderungen abgefangen werden. Sie können mehr vom Beamten lesen Winkeldokumentation .

  • Erstellen Sie eine neue Klasse HttpInterceptor.ts
ng g service appService  

Wir müssen die neue Klasse zur Liste der Anbieter im App-Modul hinzufügen.

  
import {Component, OnInit} from ‘@angular/core’;
import {AppServiceService } from ‘./app-service.service’;
@Component ({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent implements OnInit {
title = ‘errorHandling-app’;
constructor (appService: AppServiceService) {
}
ngOnInit() {}
}

Beachten Sie, wie HTTP_INTERCEPTORS aus @angular/common/http importiert wurde. Wenn Sie auf die Schaltfläche klicken, um die http-Anfrage zu stellen, wird die Anfrage abgefangen und „abgefangen“ wird in der Konsole des Browsers protokolliert.

Yaay, wir konnten jetzt alle unsere Anfragen abfangen und bei jeder Anfrage erfolgreich eine Nachricht an die Konsole protokollieren. Damit können wir hier unsere Fehlerbehandlungslogik einfügen. Bearbeiten Sie die HttpInterceptor-Datei wie unten gezeigt

  
import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;

@Injectable ({
providedIn: ‘root’
})
export class AppServiceService {
base_Url = ‘ https://api.chucknorris.io/jokes ’;

constructor (private http: HttpClient) { }

getJokes (): Observable {
return this.http.get(|_+_|)
}

extractJokes () {
this.getJokes ().subscribe(res => {
console.log(res);
})
}
}

Die Verwendung von HttpInterceptor ermöglicht es uns, eine ordnungsgemäße Trennung von Bedenken zu erzielen, was genau das ist, was Angular als beste Vorgehensweise predigt. Wenn wir die Art und Weise ändern möchten, wie wir Fehler in einem Teil unserer Anwendung an den Benutzer weitergeben, können wir dies einfach in der erstellten Interceptor-Klasse tun. Auf diese Weise können wir Fehler innerhalb der Anwendung richtig und global behandeln.

Damit sind wir am Ende des Tutorials angelangt, wir konnten verschiedene Möglichkeiten des Umgangs mit Fehlern in unserer Winkelanwendung demonstrieren.

Sie können auf den Quellcode zugreifen Hier

*Ursprünglich veröffentlicht von Solomon bei dunebook.com

================================================ = ============

Folge mir auf Facebook | Twitter

Erfahren Sie mehr

Angular 7 (ehemals Angular 2) - Das komplette Handbuch

Mehrfachauswahl Dropdown eckig

Lernen und verstehen Sie AngularJS

Der komplette Angular-Kurs: Anfänger bis Fortgeschrittene

Winkel-Crashkurs für vielbeschäftigte Entwickler

Angular Essentials (Angular 2+ mit TypeScript)

Angular (Vollständige App) mit Angular Material, Angularfire & NgRx

Angular & NodeJS - Der MEAN Stack Guide


#eckig

www.dunebook.com

Fehlerbehandlung in Angular

In diesem Tutorial zeigen wir Ihnen, wie Sie Fehler in unseren Angular-Anwendungen richtig behandeln...