Negli script precedenti abbiamo visto diversi modi di usare l'interception dele chiamate HTTP per svolgere diversi compiti. In questo script vediamo come sfruttare questa tecnica per coprire un'altra esigenza molto comune, cioè quella di utilizzare url diversi a seconda degli ambienti (sviluppo, staging produzione, e così via).
Quando costruiamo il codice per effettuare una chiamata AJAX, in genere prendiamo l'url di base da qualche parte (in genere un parametro in un file di configurazione), ci concateniamo la seconda parte dell'url e poi eseguiamo la chiamata. Questo codice è perfettamente valido, ma ha lo sconveniente di dover sempre recuperare l'url base ed eseguire la concatenazione.
Per rimediare a questo sconveniente, possiamo fare in modo che il codice che esegue la chiamata si preoccupi di impostare come url solo la seconda parte, sarà poi compito di un interceptor recuperare l'url base ed eseguire la concatenazione.
export class CustomService { constructor(private http: HttpClient) { } getStringFromService() { return this.http.get<string>('api/service/getstring') } } ... export class UrlInterceptor implements HttpInterceptor { constructor(@Inject(BASE_API_URL) private baseApiUrl: string) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const correctReq = req.clone({ url: this.baseApiUrl + req.url }); return next.handle(correctReq); } }
Il metodo getStringFromService esegue la chiamata HTTP impostando un url che non contiene la base. La classe UrlInterceptor intercetta la chiamata HTTP e nel metodo intercept aggiunge l'url base a quello impostato nel metodo getStringFromService. Il parametro che contiene l'url di base viene iniettato nel costruttore dell'interceptor dal motore di injection Angular, opportunamente configurato in precedenza, ma può essere preso anche in altri modi a secodna delle esigenze dell'applicazione.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Verificare la provenienza di un commit tramite le GitHub Actions
Eseguire le GitHub Actions offline
Le novità di Angular: i miglioramenti alla CLI
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Gestire i null nelle reactive form tipizzate di Angular
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Generare token per autenicarsi sulle API di GitHub
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Sfruttare lo streaming di una chiamata Http da Blazor