角度的 RxJS答案

【问题标题】：RxJS in angular角度的 RxJS
【发布时间】：2018-03-02 16:12:02
【问题描述】：

我是 RxJS 和 Angular 的新手。

有两个http请求。如果第一个成功，则应该执行下一个。如果第一个失败或返回错误数据 - 我们应该立即发出错误。我已经浪费了几个小时来使用 RxJS 但没有成功。

第一个请求 (service.ts)

  login(form): Observable<any> {
    return this.http.post(this.apiUrl, form)
      .catch(this.handleError);
  }

第二个 (service.ts)

  makeSiteLogin(form): Observable<any> {
    return this.http.post(this.apiUrl, form, {responseType: 'text' as 'text'})
      .catch(this.handleError);
  }

作为 AngularJS/jQuery 程序员，我没有找到比在组件（控制器）中检查此请求的结果更好的方法。我想最好在服务中检查结果。 component.ts:

this.loginService.login(this.userForm).subscribe(data => {
  if (data && data.ssid) {
    this.loginService.makeSiteLogin(this.userForm).subscribe(data2 => {
      if (data2) {
        alert('good');
      } else {
        alert('another error');
      }
    });
  } else {
    alert('an error');
  }
});

如您所见，如果第一个请求成功，我正在嵌套函数并调用this.loginService.makeSiteLogin。这很容易，但我认为远非完美。如果我以这种方式使用 Observable，它们将毫无用处。

我想我应该使用switchMap，但我怎样才能通过这种方式检查所有结果？

在控制器中，我只需要一个服务函数调用，它应该返回第二个函数的成功结果（全部完成的条件）或错误。我不在乎哪个函数抛出了错误。

非常感谢。

【问题讨论】：

subscribe 可以接受 2 个函数作为参数，例如一个 Promise 第一个是成功响应，第二个是错误响应。 .subscribe(successFuntion(), errorFunction())
请改写您问题的标题，以免其含糊不清
Concatenation of Angular http requests的可能重复

标签： angular rxjs

【解决方案1】：

根据您的用例，您可以将flatMap、switchMap 或concatMap 与这样的模式一起使用。

this.loginService.login(this.userForm)
    .switchMap(data => {
        if (!data || !data.ssid) {
            return Observable.throw('First login failed');
        }

        return this.loginService.makeSiteLogin(this.userForm)
    })
    .subscribe(data => alert('good'), error => alert('bad'));

【讨论】：