如何使用 RxJS 完成这项工作答案

【问题标题】：how to use RxJS do this job如何使用 RxJS 完成这项工作
【发布时间】：2017-04-20 18:50:11
【问题描述】：

大家，我正在学习使用 Angular 2 的 Web App 程序，我想实现一个服务。

这样的服务：

@Injectable
export class MyService {
  private _data: Any;
  private _dataReady: boolean = false;

  getData(): Observable<any> {

    if (this._dataReady)
      return Observable.of(this._data);
    else {

       http.get('url').subscribe(response=>{
          this._data = do_some_calc(response, this._data);

          if (need_more_data(this._data)) {
             Recursive http.get('url')....
          } else {
             this._dataReady = true;
             return Observable.of(this._data);
          }

       });
    }
  }

}

对我来说困难的部分是当数据没有准备好时，需要从网络上获取一些数据，并且依赖于新到达的数据中的信息，可能需要再次从网络上获取另一个数据。

如何实现这部分并最终返回客户端一个 Observalbe？

我知道如何实现这个使用回调函数，但我对如何使用 RxJS 实现非常感兴趣。

谢谢。

【问题讨论】：

标签： angular typescript rxjs rxjs5

【解决方案1】：

如果请求相互依赖，通常您会链接多个 concatMap 运算符：

http.get('url')
  .concatMap(response => {
    this._data = do_some_calc(response, this._data);

    if (need_more_data(this._data)) {
      return http.get('url')
        .concatMap(response => { ... })
        .concatMap(response => { ... });
    } else {
      this._dataReady = true;
      return Observable.of(this._data);
    }
  })
  .subscribe(response => { ... });

或者您可以创建一个返回 Observable 并调用自身的递归函数：

function recursiveGet(url): Observable {
  return http.get('url')
    .concatMap(response => {
      if (need_more_data(this._data)) {
        return recursiveGet(url);
      } else {
        this._dataReady = true;
        return Observable.of(this._data);
      }
    });
}

【讨论】：