Angular 4如何等待httpclient完成

Question

在我的应用程序中，我有从自定义基本服务继承的服务（即调用其余服务），这些服务定义了在所有其他服务中使用的常用方法和属性。其中一个参数是我的休息服务的基础URL，它在环境下使用了一个变量。但是现在需要使这个URL来自配置文件。所以我将不得不使用httpclient，它提出了一个问题，现在在实际服务尝试使用基本url时，它尚未解决。有没有办法如何等待，直到这个电话解决？ 我的代码如下所示：

基service.service.ts：

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

一些-data.service.ts：

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

我如何能在我的服务等待任何建议直到apiUrl得到解决，或者我该怎么做才能使用我的基本服务，并使用子服务依赖的数据解决，直到他们使用它？

Answer 1

一个快速和肮脏是使URL基地可观察到的本身，并确保没有在该服务可以继续，直到它给出了一个值：

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之后。

Answer 2

异步/等待可能是实现此目的的一种方法。构造函数调用异步函数“setApiUrlBase”，它在设置API Url之前等待“getConfigData”解析配置文件的HTTP响应。我个人的观点是，你应该修改你的REST端点，这样你就不需要每当有足够的时候发出两个HTTP请求，但这取决于你想如何实现它。

export class BaseService { 
    protected apiUrlBase: string; 

    constructor(protected _http: HttpClient) { 
     this.setApiUrlBase(); 
    } 

    async setApiUrlBase() { 
     await this.getConfigData().then(
      response => { 
       // Promise successful 
       response.subscribe(
        x => { 
         // Subscription successful 
         this.apiUrlBase = x.apiUrlBase; 
        } 
       ) 
      }, 
      err => { 
       // Promise fail error handling 
      } 
     ); 
    } 

    getConfigData(): Promise<Observable<Response>> { 
     return new Promise(resolve => { 
      this._http.get('../../assets/config.json').subscribe(
       response => { 
        r = response; 
       }, 
       error => { 
        // Config error handling 
       }, 
       () => { 
        resolve(r); 
       } 
      ) 
     }); 
    } 
}