In questo tutorial, verrà introdotto HTTP errori in JavaScript, e come si utilizza il tag HttpClient con RxJS gestione degli errori degli operatori e, infine, come utilizzare i tag HttpInterceptor

Questo è un immersione profonda in errore HTTP movimentazione Angolare 7, si potrebbe desiderare di check-out il post introduttivo sulla gestione degli errori qui.

Prerequisiti

Per essere in grado di seguire la dimostrazione di questo tutorial dovresti avere:

  • Node versione 11.0 installato sulla tua macchina.
  • Node Package Manager versione 6.7 (di solito viene fornito con l’installazione del nodo).
  • Angular CLI versione 7.0
  • L’ultima versione di Angular (versione 7)
 // run the command in a terminal ng version

Conferma che stai usando la versione 7 e aggiorna a 7 se non lo sei.Altre cose che saranno piacevoli da avere sono:

  • Una conoscenza pratica del framework angolare a livello principiante.
  • La familiarità con i servizi Angolari sarà un vantaggio ma non un requisito.

Outsider errors

Questi sono errori che chiamiamo errori lato server perché provengono principalmente dall’esterno dell’applicazione angolare e unHttpErrorResponse viene sempre restituito ogni volta che si verificano. Ha proprietà come:

  • Error name: questo indica il nome dell’errore.
  • Messaggio di errore: questo cerca di spiegare l’errore in termini semplici per una più facile comprensione.
  • Stato errore: ogni tipo di errore lato server ha un codice assegnato ad esso per differenziarlo dal resto. Questi codici sono solitamente codici a tre cifre come 400 che, significa che la richiesta inviata è stata inaspettata o 500 che, segnala un errore interno del server e così via.

Gestore di errori in Angular

Angular ha una classe di gestione degli errori globale chiamata errorHandler che fornisce un hook per la gestione centralizzata delle eccezioni all’interno dell’applicazione. In pratica intercetta tutti gli errori che si verificano nell’applicazione e li registra tutti nella console e arresta l’arresto anomalo dell’app.La sintassi è la seguente:

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

Questo è un ottimo modo per gestire gli errori in Angular, in particolare gli errori insider.

La limitazione di errorHandler

Se hai seguito il post introduttivo qui, vedrai come la classe Angular errorHandler è stata la soluzione definitiva per centralizzare il concetto try / catch di errori nella nostra applicazione. Tuttavia, quando vogliamo concentrarci sugli errori lato server, scopriamo che la classe errorHandler non può funzionare direttamente con le richieste HTTP nella nostra applicazione. Una buona notizia è che Angular fornisce una sorta di interfaccia in cui è possibile utilizzare il concetto della classe errorHandler per gestire direttamente le richieste HTTP.

Soluzione 1: Angular HttpClient

(https://angular.io/api/common/http/HttpClient) in@angular/common/``(https://angular.io/api/common/http) offre un’API HTTP client semplificata per le applicazioni Angular che si basa sull’interfacciaXMLHttpRequest esposta dai browser. Ulteriori vantaggi di(https://angular.io/api/common/http/HttpClient)includono funzionalità di testabilità, oggetti di richiesta e risposta digitati, intercettazione di richiesta e risposta,Observable API e gestione semplificata degli errori. Quindi usando questo client con alcuni operatori RxJS possiamo ottenere una sorta di try/catch di gestione degli errori, ma questa volta comunicando direttamente con le richieste HTTP attraverso un’applicazione angolare in un servizio. Lo capirai meglio in azione.

Demo

Questa è un’applicazione demo jsonplaceholder in cui parti dei dati disponibili sul jsonplaceholder viene visualizzato sull’interfaccia utente, un servizio perfetto per dimostrare concetti relativi al server. Se hai tutti i prerequisiti indicati all’inizio del post pronti, puoi scaricare il progetto da GitHub qui. Decomprimere e aprire il progetto in codice VS e utilizzare il terminale per inizializzare i moduli del nodo:

 npm install

Ora che la tua applicazione è attiva e funzionante, devi prima di tutto assicurarti che il modulo richiesto alle applicazioni Angolari per utilizzare qualsiasi servizio server sia attivo nella tua applicazione. Passare al fileapp.module.ts e confermare che esiste un’istruzione import come questa:

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

L’applicazione ha quattro componenti: post, barra laterale, dettagli e utenti. Ha anche un servizio chiamato servizio dati in cui vengono effettuate tutte le richieste HTTP. Il tuo filedata.service.ts dovrebbe essere simile a questo:

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

Vengono fatte tre richieste al server, ora se scegli una di queste richieste, ad esempiogetUsers() e vuoi aggiungere la gestione degli errori con HttpClient, allora:

  • Importa l’oggetto catchError dagli operatori RxJS.
  • Importa throwError da RxJS.
  • Utilizzare il metodo pipe per introdurlo nella richiesta HTTP desiderata.
  • Crea un metodo per gestire l’errore

Se segui questi, il tuo filedata.service.ts sarà simile a questo:

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

Vedrai che la richiesta get è stata deliberatamente manomessa per garantire che si verifichi un errore. Quando si esegue l’applicazione, si vedrà l’errore registrato con il messaggio di log che vogliamo.

A volte, quando si invia una richiesta a un server lento ben noto, si sa che potrebbe richiedere un po ‘ di tempo per ottenere una risposta o richiedere alcuni tentativi per ottenere effettivamente una risposta dal server, è possibile inviare nuovamente la richiesta un numero di volte prima di lanciare l’errore. Questo può essere ottenuto con il nuovo metodo di RxJS, quindi importare i tentativi di operatore quindi è possibile utilizzare all’interno del tubo di come viene utilizzato di seguito:

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

Se si esegue l’applicazione, la console dovrebbe essere simile a questo:

Si veda in primo luogo cerca di ottenere la risposta, quindi ripete due volte, proprio come abbiamo specificato prima di lanciare il messaggio di errore registro.

È anche molto importante che il tuo tentativo arrivi prima del catchError in modo che il messaggio di errore non venga registrato dopo ogni prova.

Questa soluzione funziona perfettamente finché l’applicazione ha un servizio e probabilmente una richiesta get, ma quando l’applicazione è grande e ha molti servizi o molte più richieste per servizio diventa una soluzione inefficiente. Questo perché devi sempre copiare la funzione di errore di handle tra i servizi e ripetere il codice anche all’interno di un servizio. Immagina il costo della memoria per il debug e il mantenimento della base di codice.

L’opzione migliore: Angular HttpInterceptor

Proprio come dice il nome, Angular fornisce un’interfaccia chiamataHttpInterceptor che può intercettare(https://angular.io/api/common/http/HttpRequest) e(https://angular.io/api/common/http/HttpResponse) e crea una piattaforma per gestirli. Ciò significa che otteniamo l’accesso diretto alle nostre richieste del server, quale posto migliore per affrontare gli errori del server che qui!La sintassi è la seguente:

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

Per utilizzare HttpInterceptor, creare un nuovo servizio in cui si desidera che la logica dell’intercettore entri con la CLI angolare:

 ng generate service services/interceptor

Ora che avete generato un intercettore servizio, individuare il app.module.ts il file per la registrazione di conseguenza, come:

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

il Prossimo passo è quello di sbarazzarsi di tutti l’errore di logica di gestione nel data.service.ts file, il file dovrebbe essere simile a questo quando si è fatto:

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

Copiare e incollare il codice riportato di seguito nel 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) ) }; }

Se si esegue l’applicazione, si può vedere che registra il nostro messaggio di errore e genera l’errore così come noi ci aspettiamo. Questo è il metodo migliore per gestire gli errori del server nel tuo progetto angolare. È possibile testare tutte e tre le richieste contemporaneamente per gli errori manomettendo con loro. Quando lo fai, scoprirai che l’intercettore li cattura tutti e registra il nostro messaggio per ciascuno, è davvero incredibile da guardare.

Conclusione

Sei stato introdotto in vari modi per gestire gli errori lato server nelle tue applicazioni Angolari. Hai anche visto quando usare e quando non usare HttpClient con gli operatori RxJS e come il modo migliore è usare gli intercettori. Nel prossimo tutorial di questa serie, ti verrà presentato il monitoraggio degli errori. Il codice completo per questo tutorial è su GitHub e può essere trovato qui. Codifica felice!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.