V tomto návodu, vám bude představen HTTP chyby v Javascriptu, a jak používat HttpClient s RxJS zpracování chyb operátorů a konečně, jak používat HttpInterceptor

je To hluboký ponor do HTTP, zpracování chyb v Úhlové 7, možná budete chtít, aby podívejte se na úvodní příspěvek na zpracování chyb.

prerekvizity

abyste mohli v ukázce tohoto tutoriálu pokračovat, měli byste mít na svém počítači nainstalovanou verzi uzlu 11.0

  • .
  • Node Package Manager verze 6.7 (obvykle je dodáván s instalací uzlu).
  • Úhlové CLI verze 7.0
  • nejnovější verze Úhlové (verze 7)
 // run the command in a terminal ng version

Potvrďte, že používáte verzi 7, update na 7, pokud si nejste.Další věci, které budou hezké, jsou:

  • pracovní znalost úhlového rámce na úrovni začátečníků.
  • Znalost úhlových služeb bude plusem, ale nikoli požadavkem.

Outsider chyby

toto jsou chyby, které nazýváme chyby na straně serveru, protože oni přicházejí hlavně z vnějšku Úhlové aplikace a HttpErrorResponse je vždy vrácena kdykoliv dojít. Má vlastnosti jako:

  • název chyby: toto uvádí název chyby.
  • chybová zpráva: Toto se snaží vysvětlit chybu jednoduše pro snadnější pochopení.
  • stav chyby: každý typ chyby na straně serveru má přiřazený kód, který jej odlišuje od ostatních. Tyto kódy jsou obvykle třímístné kódy, jako je 400, což znamená, že odeslaná žádost byla neočekávaná nebo 500, což signalizuje interní chybu serveru a tak dále.

popisovač chyb v Angular

Angular má globální třídu zpracování chyb zvanou errorHandler, která poskytuje háček pro centralizované zpracování výjimek uvnitř vaší aplikace. V podstatě zachycuje všechny chyby, ke kterým dochází ve vaší aplikaci, a všechny je přihlásí do konzoly a zastaví aplikaci před zhroucením.Syntaxe vypadá takto:

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

to je skvělý způsob, jak zvládnout chyby v Úhlové, zejména chyby zasvěcených osob.

omezení errorHandler

Pokud jste postupovali z úvodní příspěvek zde, uvidíte, jak Úhlové errorHandler třída byla konečným řešením centralizace try/catch. pojetí chyby v naší aplikaci. Když se však chceme zaměřit na chyby na straně serveru, zjistíme, že třída errorHandler nemůže pracovat přímo s požadavky HTTP v naší aplikaci. Dobrou zprávou je, že Angular poskytuje jakési rozhraní, kde můžete použít koncept třídy errorHandler k přímému řešení požadavků HTTP.

Řešení 1: Úhlové HttpClient

(https://angular.io/api/common/http/HttpClient)@angular/common/``(https://angular.io/api/common/http) nabízí zjednodušený klient HTTP API pro Úhlové aplikace, které závisí na XMLHttpRequest rozhraní vystavené prostřednictvím prohlížeče. Další výhody (https://angular.io/api/common/http/HttpClient)patří testovatelnosti funkce, zadali žádost a odpověď objekty, žádost a odpověď odposlechu, Observable Api, a efektivní zpracování chyb. Takže pomocí tohoto klienta s některými RxJS operátory můžeme dostat druh try/catch způsob zpracování chyb, ale tentokrát přímo komunikuje s požadavky HTTP prostřednictvím Úhlové aplikace ve službě. Budete to lépe chápat v akci.

Demo

Toto je demo jsonplaceholder aplikace, kde částech k dispozici údaje o jsonplaceholder se zobrazí v uživatelském rozhraní, perfektní servis prokázat, server související pojmy. Pokud máte všechny předpoklady uvedené na začátku příspěvku připravené, můžete si Projekt stáhnout z GitHubu zde. Rozbalte a otevřete projekt v kódu VS a pomocí terminálu inicializujte moduly uzlu:

 npm install

Nyní, že vaše aplikace je nahoru a běh, budete muset v první řadě zajistit, že modul potřebný pro Úhlové aplikací použít libovolný server služba je aktivní v aplikaci. Přejděte do app.module.ts soubor a potvrdit, že je dovozní prohlášení, jako je tento:

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

aplikace má čtyři části: příspěvky, sidebar, detaily a uživatelů. Má také službu nazvanou data service, kde jsou provedeny všechny požadavky HTTP. Váš data.service.ts soubor by měl vypadat takto:

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

Tři požadavky jsou na serveru, teď, pokud si vyberete jeden z těchto požadavků, řekněme getUsers() a chcete přidat zpracování chyb s HttpClient pak bude:

  • Import catchError objekt z RxJS operátorů.
  • Import throwError z RxJS.
  • použijte metodu pipe pro zavedení do požadovaného požadavku HTTP.
  • Vytvořit metodu pro zpracování chyby

Pokud budete postupovat podle těchto, data.service.ts soubor bude vypadat takto:

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

uvidíte, že požadavek get byl úmyslně manipulován, aby se zajistilo, že dojde k chybě. Při spuštění aplikace se zobrazí chyba zaznamenaná se zprávou protokolu, kterou chceme.

Někdy, když budete posílat žádost o dobře známý pomalý server, víte, že to může chvíli trvat dostat odpověď, nebo trvat několik pokusů, aby skutečně dostat odpověď od serveru, můžete odeslat žádost několikrát, než to házet chybu. To může být dosaženo s opakování metody v RxJS, tak importu opakovat operátor pak můžete použít uvnitř potrubí, jako je níže:

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

Pokud spustíte aplikaci, konzole by měla vypadat takto:

vidíte, to první se snaží dostat odpověď, pak pokusy to dvakrát stejně jako jsme specifikovali, než házet chybová zpráva protokolu.

To je také velmi důležité, aby vaše opakování je před catchError tak, že chybová zpráva je zaznamenána po každém pokusu.

Toto řešení funguje perfektně tak dlouho, jak vaše aplikace má služba a pravděpodobně jeden požadavek get, ale když vaše aplikace je velký a má mnoho služeb, nebo mnohem více požadavků za služby se stává neefektivní řešení. Je to proto, že musíte vždy kopírovat funkci chyby rukojeti napříč službami a opakovat kód i v rámci služby. Představte si náklady na paměť ladění a udržování codebase.

nejlepší volba: Úhlové HttpInterceptor

Stejně jako název říká, Úhlové poskytuje rozhraní nazývá HttpInterceptor, který může zachytit (https://angular.io/api/common/http/HttpRequest)(https://angular.io/api/common/http/HttpResponse) a vytváří platformu pro jejich zpracování. To znamená, že získáme přímý přístup k našim požadavkům na server, jaké lepší místo pro řešení chyb serveru než zde!Syntaxe vypadá takto:

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

používat HttpInterceptor vytvořit nové služby, kde chcete, aby vaše interceptor logiku jít s Úhlovou CLI:

 ng generate service services/interceptor

Nyní jste vytvořili interceptor služby, přejděte do app.module.ts soubor k registraci způsobem, jako je tento:

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

Dalším krokem je zbavit se všech chyb logiku v data.service.ts soubor, soubor by měl vypadat jako to, když jste hotovi.

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

Zkopírujte níže uvedený kód do interceptor.service.ts file:

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

Pokud spustíte aplikaci, můžete vidět, že to zaznamenává naše chybovou zprávu a hodí chybu, stejně jako očekáváme. Toto je nejlepší způsob zpracování chyb serveru ve vašem úhlovém projektu. Můžete otestovat všechny tři požadavky najednou na chyby tím, že s nimi manipulujete. Když tak učiníte, zjistíte, že interceptor je všechny zachytí a zaznamená naši zprávu pro každého, je opravdu úžasné sledovat.

závěr

byli jste seznámeni s různými způsoby zpracování chyb na straně serveru ve vašich úhlových aplikacích. Také jste viděli, kdy použít a kdy nepoužívat HttpClient s operátory RxJS a jak nejlepším způsobem je použití interceptorů. V dalším tutoriálu v této sérii se seznámíte se sledováním chyb. Kompletní kód pro tento tutoriál je na Githubu a najdete jej zde. Šťastné kódování!

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.