web-dev-qa-db-fra.com

Comment configurer baseUrl pour Angular HttpClient?

Je n'ai pas trouvé de moyen dans documentation de définir l'URL de base de l'API pour toutes les requêtes http. Est-il possible de faire avec Angular HttpClient?

angularangular-httpclient
36
Stepan Suvorov

Utilisez le nouvel intercepteur HttpClient.

Créez un injectable approprié qui implémente 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);
  }
}

HttpInterceptor peut cloner la demande et la modifier à votre guise. Dans ce cas, j'ai défini un chemin par défaut pour toutes les demandes http.

Indiquez à HttpClientModule les configurations suivantes: 

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

Désormais, toutes vos demandes commenceront par your-api-url/

56
TheUnreal

Sur la base de la réponse très utile de TheUnreal, l'intercepteur peut être écrit pour obtenir l'URL de base via 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 peut être fourni par le module d'application:

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

où environment est l'objet créé automatiquement par la CLI lors de la génération du projet:

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

vous n'avez pas nécessairement besoin d'une base URL avec HttpClient, la documentation indique qu'il vous suffit de spécifier la partie api de la demande. Si vous appelez le même serveur, il est simple comme ceci:

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

Toutefois, vous pouvez, si vous avez besoin ou souhaitez, spécifier une URL de base.

J'ai 2 suggestions pour le faire:

1 . Une classe d'assistance avec une propriété de classe statique.

export class HttpClientHelper{

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


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

2 . Une classe de base avec une propriété de classe, donc tout nouveau service devrait l'étendre:

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`);
  }

}
4
skinny_jones

Pourquoi ne pas créer une sous-classe HttpClient ayant une baseUrl configurable? Ainsi, si votre application doit communiquer avec plusieurs services, vous pouvez utiliser une sous-classe différente pour chacun, ou créer plusieurs instances d'une même sous-classe, chacune avec une configuration différente.

@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);
  }
}
1
Neutrino

Je pense qu'il n'y a pas de moyen par défaut de le faire. Faites le HttpService et à l'intérieur, vous pouvez définir la propriété de votre URL par défaut et créer des méthodes pour appeler http.get et autres avec votre URL de propriété. Ensuite, injectez HttpService au lieu de HttpClient

1
Anton Lee