change - ¿Cómo configurar baseUrl para Angular HttpClient?

page title angular 4

Question

No encontré una forma en la documentation para establecer la URL base de la API para todas las solicitudes http. ¿Es posible hacerlo con Angular HttpClient?

Answer 1

¿Por qué no crear una subclase HttpClient que tiene una baseUrl configurable? De esa manera, si su aplicación necesita comunicarse con múltiples servicios, puede usar una subclase diferente para cada uno o crear múltiples instancias de una sola subclase con una configuración diferente.

@Injectable()
export class ApiHttpClient extends HttpClient {
  public baseUrl: string;

  public constructor(handler: HttpHandler) {
    super(handler);

    // Get base url from wherever you like, or provision ApiHttpClient in your AppComponent or some other high level
    // component and set the baseUrl there.
    this.baseUrl = ''/api/'';
  }

  public get(url: string, options?: Object): Observable<any> {
    url = this.baseUrl + url;
    return super.get(url, options);
  }
}

Answer 2

Basado en la muy útil respuesta de TheUnreal , el interceptor puede escribirse para obtener la url base a través de DI:

@Injectable()
export class BaseUrlInterceptor implements HttpInterceptor {

    constructor(
        @Inject(''BASE_API_URL'') private baseUrl: string) {
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const apiReq = request.clone({ url: `${this.baseUrl}/${request.url}` });
        return next.handle(apiReq);
    }
}

BASE_API_URL puede ser proporcionado por el módulo de la aplicación:

providers: [
    { provide: "BASE_API_URL", useValue: environment.apiUrl }
]

donde environment es el objeto creado automáticamente por la CLI al generar el proyecto:

export const environment = {
  production: false,
  apiUrl: "..."
}; 

Answer 3

Creo que no hay una forma predeterminada de hacer esto. Realice el HttpService y en su interior puede definir la propiedad de su URL predeterminada y hacer métodos para llamar a http.get y otros con la URL de su propiedad. Luego inyecte HttpService en lugar de HttpClient

Answer 4

Utilice el nuevo interceptor HttpClient.

Cree un inyectable adecuado que implemente HttpInterceptor :

import {Injectable} from ''@angular/core'';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from ''@angular/common/http'';
import {Observable} from ''rxjs/Observable'';

@Injectable()
export class APIInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const apiReq = req.clone({ url: `your-api-url/${req.url}` });
    return next.handle(apiReq);
  }
}

El HttpInterceptor puede clonar la solicitud y cambiarla como desee, en este caso, definí una ruta predeterminada para todas las solicitudes http.

Proporcione el HttpClientModule con las siguientes configuraciones:

providers: [{
      provide: HTTP_INTERCEPTORS,
      useClass: APIInterceptor,
      multi: true,
    }
  ]

Ahora todas tus solicitudes comenzarán con your-api-url/

Answer 5

no necesariamente necesita una URL base con HttpClient , los documentos dicen que solo tiene que especificar la parte de la solicitud de la API, si está realizando llamadas al mismo servidor, es así de sencillo:

this.http.get(''/api/items'').subscribe(data => { ...

Sin embargo, puede, si necesita o desea, especificar una URL base.

Tengo 2 sugerencias para hacer eso:

1 . Una clase auxiliar con una propiedad de clase estática.

export class HttpClientHelper{

    static baseURL: string = ''http://localhost:8080/myApp'';
}


this.http.get(`${HttpClientHelper.baseURL}/api/items`);//in your service class

2 . Una clase base con una propiedad de clase, por lo que cualquier servicio nuevo debería ampliarla:

export class BackendBaseService {

  baseURL: string = ''http://localhost:8080/myApp'';

  constructor(){}

}

@Injectable()
export class ItemsService extends BackendBaseService{

  constructor(private http: HttpClient){  
    super();
  }

  public listAll(): Observable<any>{    
    return this.http.get(`${this.baseURL}/api/items`);
  }

}