角度加载本地文件，然后进行 http 调用以返回 observables

Question

I am new to Angular, JS, and observables. I have a typescript class called DataService. I want it to load a list of URLs from a JSON formatted local file, and then have some way to call those URLs (to a handful of REST APIs) and return observables. The problem I am having is my code is not waiting for the config file to be loaded before the REST API functions get called.

I thought I could have the DataService constructor load the configuration file, and then have unique functions for each REST API call, but that isn't working

my code:

export class DataService {

  configFile

  constructor(private http: HttpClient) {
    this.http.get('/assets/restApiUrlListConfig.json').subscribe(config => {
      this.configFile = config;
    });
  }

  getUrlFromConfigFile(name: string): string {
    ...
      this returns the URL from the config file
    ...
  }

  getUrlAData(): Observable {
    return this.http.get( getUrlFromConfigFile('A') )
  }

}

My other components have code like this:

export class SomeComponent implements OnInit {

someComponentAData

constructor(private data: DataService) { }

ngOnInit() {
    this.data.getUrlAData().subscribe(
        data => {
            this.someComponentAData = data
        }
    )
}

I am getting an error that the observable returned from the dataservice is undefined. Which I believe is because the constructor hasn't finished loading the config file, which I think is why the function getUrlAData isn't returning anything.

I feel like I'm not correctly handling these async calls, but I'm at a loss for how to tell my code to :

1. create the data service object
2. load the data file before anything else can be done
3. allow the other functions to be called asyncronously AFTER the config file is loaded

Angular CLI: 6.2.3
Node: 8.12.0
OS: win32 x64
Angular: 6.1.8

Edit 1: attempting to implement suggested solution

My DataService

  configFile
  configObservable: Observable<any>;
  someSubscribeObj

  constructor(private http: HttpClient) {

    this.someSubscribeObj = this.http.get('/assets/restApiUrlListConfig.json').subscribe(config => {
      this.someSubscribeObj = undefined;
      this.configFile = config;
    });

  }

  getObsFromConfigFile(name: string): Observable<any> {
    //...
    if (this.configFile != undefined) {
      console.log('this.restApiUrlListConfig[name]',this.configFile[name])
      return of(this.configFile[name])
    }
    else
      return of(this.someSubscribeObj.pipe(map(c => c[name]))) 
      //this.configObservable
    //...
  }


  getUrlAData(): Observable<any> {
    return this.getObsFromConfigFile('A').pipe(mergeMap(url => this.http.get(url)))
  }

My other component:

  constructor( private data: DataService ) { }

  ngOnInit() {

    //this.data.loggedIn.pipe((p) => p);

    this.data.getUrlAData().subscribe(
      data => {
        this.urlAData = data
      }
    )
}

I was unable to store the "subscribe" into the observable, so I created a generic Any type varable, but at runtime I get a problem with the pipe command:

TypeError: this.someSubscribeObj.pipe is not a function at DataService.push../src/app/services/data.service.ts.DataService.getObsFromConfigFile (data.service.ts:67) at DataService.push../src/app/services/data.service.ts.DataService.getUrlAData (data.service.ts:74)

Edit 2: the unfortunate workaround

I am currently using two nested subscriptions to get the job done basically

http.get(config_file_url).subscribe( 
config => { 
http.get( config['A'] ).subscribe( adata => { do things }; 
http.get config['B'].subscribe( bdata => {do things };
}
)

I feel like I should be able to use a mergeMap of some sort, but I couldn't get them to work as I thought they would.

Answer 1

You need to wait on that async call, I would use a flatmap to get the value out of an observable.

export class DataService {

  configFile
  configObservable: Observable<any>;

  constructor(private http: HttpClient) {
    this.configObservable = this.http.get('/assets/restApiUrlListConfig.json').pipe(
      map(config => {
        this.configObservable = undefined;
        this.configFile = config;
        return configFile;
      })
      );
  }

  getUrlFromConfigFile(name: string): Observable<string> {
    ...
      return of(configFile[name]) if configFile is set else return configObservable.pipe(map(c => c[name]));
    ...
  }

  getUrlAData(): Observable<string> {
    return this.getUrlFromConfigFile('A').pipe(map(url => this.http.get(url)))
  }

}

Basically you want to store the observable and keep using it till it completes, after it completes you can just wrap the config in an observable. The reason for wrapping it is to make the interface consistent, otherwise you have to have an if before every get.