Durante lo sviluppo di applicazioni web basate su Javascript è importante tenere traccia delle chiamate AJAX. Sebbene tutti i browser abbiano un tracer HTTP incorporato, poter loggare dati aggiuntivi inerenti all'applicazione aiuta a capire meglio l'origine delle chiamate AJAX e il motivo della chiamata. Infatti, capita spesso che vengano effettuate involontariamente (per via di bug) chiamate AJAX che rallentano l'applicazione peggiorandone l'usabilita.
Angular 2 non ha un interceptor per la classe Http, quindi l'unico modo per loggare le chiamate è fare l'override della classe e dei suoi metodi aggiungendo le informazioni di logging prima della chiamata al metodo base.
import { Http, ConnectionBackend, Response, RequestOptions, RequestOptionsArgs } from '@angular/http'; import { Injectable } from '@angular/core'; @Injectable() export class LogHttp extends Http { constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { super(backend, defaultOptions); } get(url: string, options?: RequestOptionsArgs): Observable<Response> { console.log("log"); return super.get(url, options); } }
Una volta registrata la classe, dobbiamo fare in modo che quando la classe Http viene iniettata dal'injector di Angular 2, in realtà venga creata un'istanza di LogHttp. Per fare questo dobbiamo registrare la nuova classe nella sezione providers del modulo di Angular 2.
import { FormsModule } from '@angular/forms'; import { HttpModule, Http, XHRBackend, RequestOptions } from '@angular/http'; @NgModule({ providers: [ { provide: Http, useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) { return new LogHttp(backend, defaultOptions); }, deps: [XHRBackend, RequestOptions] } ] }); export class AppModule { }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Utilizzare Tailwind CSS all'interno di React: installazione
Utilizzare database e servizi con gli add-on di Container App
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
C# 12: Cosa c'è di nuovo e interessante
Gestire undefined e partial nelle reactive forms di Angular
Short-circuiting della Pipeline in ASP.NET Core
Utilizzare i primary constructor in C#
Routing statico e PreRendering in una Blazor Web App
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10