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
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Utilizzare i nuovi piani dedicati di Azure Container Apps
Modernizzare le applicazioni WPF e Windows Forms con Blazor
Reactive form tipizzati con FormBuilder in Angular
Utilizzare la session affinity con Azure Container Apps
Impostare dinamicamente il nome di una run di un workflow di GitHub
Utilizzo di Map e Object in Javascript
Sfruttare lo streaming di una chiamata Http da Blazor
Scoprire le ottimizzazioni di Entity Framework Core in fase di scrittura di un solo record
Sviluppo applicazioni x-plat con .NET MAUI
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Evitare la command injection in un workflow di GitHub
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5