Service angulaire au démarrage et demande la dépendance

Question

Je travaille dans angulaire 4 et j'ai un appConfigService qui fournit l'URL de l'application api à partir d'un fichier settings.json, quelque chose comme:

private appConfig: AppConfig; 

constructor(private http: Http) { 
    this.loadConfig().subscribe(e => this.appConfig = e); 
} 
public loadConfig(): Observable<AppConfig> { 
    return this.http 
     .get("appsettings.json") 
     .map(this.mapAppConfig) 
     .catch(this.handleError); 
} 

puis-je utiliser cette URL pour toutes mes demandes suivantes.

Cela fonctionne très bien pour les demandes envoyées après que l'URL a été retourné, mais j'ai des problèmes avec les demandes envoyées lorsque la page se charge (et l'URL n'a pas encore été récupérée).

Je sais que je peux utiliser la fonction flatmap dans les services qui se chargent au démarrage, mais je me retrouve essentiellement la création de deux implémentations de la même fonction:

private getBasicRequest(offset: number = 0, limit:number = 0): Observable<Response>{ 
    if (!this.appConfigService.isAppConfigValid()) { 
     var urlObserver = this.appConfigService.loadConfig(); 

     var request = urlObserver 
     .flatMap(responseFromConfigService => 
      this.http.get(responseFromConfigService.apiBaseAddress + "/entries/" + this.searchTerm + "?offset=" + offset + "&limit=" + limit)); 

     return request; 

    } else { 
     var url = this.appConfigService.getApiLink("entries/" + this.searchTerm + "?offset=" + offset + "&limit=" + limit); 
     return this.http.get(url); 
    } 
    } 

Quelle serait une meilleure façon de traiter ce scénario? J'ai essayé de faire démarrer le service appConfigService au démarrage, ce qui résoudrait mon problème, mais cela n'a pas fonctionné.

Answer 1

Toujours utiliser l'observable au lieu de les abonner. Votre service de configuration devrait ressembler à ceci:

export class AppConfigService 
{ 
    public config$: Observable<AppConfig>; 

    constructor(private http: Http) { 
     this.config$ = this.http 
      .get("appsettings.json") 
      .map(this.mapAppConfig) 
      .catch(this.handleError) 
      .share(); 
    } 
} 

Et tous les autres services utilisent comme ceci:

private getBasicRequest(offset = 0, limit = 0): Observable<Response> { 
     var config$ = this.appConfigService.config$; 

     var request = config$ 
     .map(config => config.apiBaseAddress) 
     .map(base => `${base}/entries/${this.searchTerm}?offset=${offset}&limit=${limit}) 
     .flatMap(url => this.http.get(url)); 

     return request; 
    }