Angular 4如何等待httpclient完成

export class Baseservice{
    protected apiUrlBase: String;

    constructor(protected _http: httpClient) {
        // some logic

        this.getConfigData()
          .subscribe(
            x => {
              this.apiUrlBase = x.apiUrlBase;
            }
          );

    }

    getConfigData(): Observable<any> {
        return this._http.get(
          '../../assets/config.json'
        )
          .do(x => {
          })
          .catch(error => {
            alert('Unable to read configuration file:' + JSON.Stringify(error));
            return Observable.throw(error);
          });
      }
}

@Injectable()
export class Testservice extends BaseApiservice {
    private get _someDataserviceUrl(): String {
        return this.apiUrlBase + '/api/v1/somedata';
    }

    constructor(_http: httpClient) {
        super(_http);
    }

    getSomeData(): Observable<ISomeData[]> {
        return this._http.get<ISomeData[]>(this._someDataserviceUrl)
          .do(this.handlesuccessResponsE)
          .catch(this.handleErrorResponsE);
    }
}

解决方法

export class Baseservice{
protected apiUrlBase: BehaviorSubject<String> = new BehaviorSubject<String>(null);
protected apiUrlBase$: Observable<String> = this.apiUrlBase.filter(b => !!b).take(1);

constructor(protected _http: httpClient) {
    // some logic

    this.getConfigData()
      .subscribe(
        x => {
          this.apiUrlBase.next(x.apiUrlBasE);
        }
      );

}

getConfigData(): Observable<any> {
    return this._http.get(
      '../../assets/config.json'
    )
      .do(x => {
      })
      .catch(error => {
        alert('Unable to read configuration file:' + JSON.Stringify(error));
        return Observable.throw(error);
      });
  }
} 


@Injectable()
export class Testservice extends BaseApiservice {
  private _someDataserviceUrl(apiUrlBasE): String {
      return apiUrlBase + '/api/v1/somedata';
  }

  constructor(_http: httpClient) {
      super(_http);
  }

  getSomeData(): Observable<ISomeData[]> {
      return this.apiUrlBase$.switchMap(apiUrlBase => this._http.get<ISomeData[]>(this._someDataserviceUrl(apiUrlBasE))
        .do(this.handlesuccessResponsE)
        .catch(this.handleErrorResponsE));
  }
}

但这显然非常难看.更好的解决方案是通过为应用程序创建应用程序初始化程序提供程序,确保此基本服务在应用程序中的任何其他内容之前加载和解析：

import { Injectable,APP_INITIALIZER } from '@angular/core';

@Injectable()
export class Baseservice{
  protected apiUrlBase: String;

  constructor(protected _http: httpClient) {
  }

  getConfigData(): Observable<any> {
    return this._http.get(
      '../../assets/config.json'
    )
      .do(x => {
      })
      .catch(error => {
        alert('Unable to read configuration file:' + JSON.Stringify(error));
        return Observable.throw(error);
      });
  }

  public load() {
     return new Promise((resolve,reject) => {
       this.getConfigData()
         .subscribe(
           x => {
             this.apiUrlBase = x.apiUrlBase;
             resolve(true);
           },err => resolve(err)
         );
     });
  }
}

export function BaseserviceInitFactory(baseservice: BaseservicE) {
  return () => baseservice.load();
}

export const BaseserviceInitProvider = {
  provide: APP_INITIALIZER,useFactory: BaseserviceInitFactory,deps: [Baseservice],multi: true
}

然后将BaseserviceInitProvider放在您的应用程序模块提供程序中的Baseservice之后.