RxJS有角度

Posted 2021-04-18

我是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。这很容易，但我认为远非完美。如果我以这种方式使用Observables，它们就没用了。

我想我应该使用switchMap但是如何以这种方式检查所有结果？

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

非常感谢提前。

答案

根据您的用例，您可以使用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'));