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
Reactive form tipizzati con FormBuilder in Angular
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Specificare il versioning nel path degli URL in ASP.NET Web API
Hosting di componenti WebAssembly in un'applicazione Blazor static
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Definire stili a livello di libreria in Angular
Disabilitare automaticamente un workflow di GitHub (parte 2)
Utilizzare database e servizi con gli add-on di Container App
Limitare le richieste lato server con l'interactive routing di Blazor 8
Utilizzare politiche di resiliency con Azure Container App