使用 observables 在 angular2 上链接 http 调用答案

【问题标题】：Chaining http calls on angular2 using observables使用 observables 在 angular2 上链接 http 调用
【发布时间】：2016-11-14 02:07:26
【问题描述】：

我有一个 angular2 应用程序，该应用程序具有一个服务，该服务发起一个 HTTP 调用，该调用具有不同的订阅者（每个订阅者显示不同的信息）。第一次调用完成后，我需要进行第二次独立的 HTTP 调用，并根据检索到的值过滤从 first 调用获得的数组。它不工作，第二个 HTTP 调用的订阅者不知道等待，我得到一个空列表，因为第一个调用的数组还不存在

我正在附加相关服务

constructor(private http: Http) {
    this.initializeAlertService();
    console.log('Started alerts service');
   }

   initializeAlertService() {
        if (!this.allData$) {
          this.allData$ = <BehaviorSubject<Alert[]>> new BehaviorSubject(new Array<Alert>());

          this.http.get(this.url)
            .map((res:Response) => res.json())
            .catch((error:any) => Observable.throw(error || 'Server Error'))
            .subscribe(
              allData => {
                this.allData = allData;
                this.allData$.next(allData);
                this.initializeAlertSeverities(); -- I want this to fire when the 'allData' is ready
              },
              error => console.log("Error subscribing to AlertService: " + error)
            );
        }
  }

subscribeToAlertSeverities(): Observable<AlertSeverity[]>  {

    return this.alertSeverities$.asObservable();
  }

然后在我的组件上我订阅了 alertSeverities，但我没有得到数据......

【问题讨论】：

您可能想看看concat 运算符。 reactivex.io/documentation/operators/concat.html 这是一个 SO 示例：stackoverflow.com/questions/30519645/…
您能否提供使用数据的代码并解释您认为它在第二次调用完成之前触发的原因？
this.initializeAlertSeverities(); 在第一个请求完成后调用。
另见stackoverflow.com/questions/40295717/…stackoverflow.com/questions/39797698/…stackoverflow.com/questions/39566268/…
变量alertServerities$是什么。您永远不会定义它，也不会使用它来创建订阅。

标签： angular rxjs observable

【解决方案1】：

我能够通过将 http 调用的结果传递给代码订阅部分中的函数来解决这个问题

constructor(private http: Http) {
    this.initializeAlertService();
    console.log('Started alerts service');
  }

  initializeAlertService() {
    if (!this.alerts$) {
      this.alerts$ = <BehaviorSubject<Alert[]>> new BehaviorSubject(new Array<Alert>());
      this.alertSeverities$ = <BehaviorSubject<AlertSeverity[]>> new BehaviorSubject(new Array<AlertSeverity>());

      this.http.get('first url')
      .map((res:Response) => res.json())
      .subscribe(alerts => {
        this.alerts$.next(alerts);
        this.initializeAlertSeverities(alerts);
      })
    }
  }

  initializeAlertSeverities(alerts){
    this.http.get('second url')
    .map((res:Response) => res.json())
    .catch((error:any) => Observable.throw(error || 'Server Error'))
    .subscribe(
      severities => {
        severities.map((severity) => {
          var severityCounter = alerts.filter(alert => alert['severity'] == severity.severityValue).length;
          severity.severityCount = severityCounter;
        });

        this.alertSeverities$.next(severities);
      },
      error => console.log("Error subscribing to Alert Severities: " + error)
    );
  }

  subscribeToAlertSeverities(): Observable<AlertSeverity[]>  {
    //actual subscriber that components subscribe to
    return this.alertSeverities$.asObservable();
  }


  subscribeToAlertService(): Observable<Alert[]> {
    return this.alerts$.asObservable();
  }

【讨论】：