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.