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
Creare un'applicazione React e configurare Tailwind CSS
Usare le variabili per personalizzare gli stili CSS
Generare token per autenicarsi sulle API di GitHub
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Routing statico e PreRendering in una Blazor Web App
Usare lo spread operator con i collection initializer in C#
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Generare file per il download da Blazor WebAssembly
Workflow di continuous deployment tramite pull request label in GitHub
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework