title: angular - Error handling with nested subscriptions - Chain multiple api-calls
body: <p>I'm building an angular app with a login/registration flow, and ATM I'm looking for an easy and more readable way to code the following:</p>
  <pre><code>register() {
      this.accountService.register(this.user, this.password, this.passwordConfirmation).subscribe(() =&gt; {
          this.accountService.login(this.user.email, this.password).subscribe((loginResult) =&gt; {
              this.accountService.csrfRefresh().subscribe(() =&gt; {
                  if (loginResult.status === ELoginStatus.success) {
                      this.router.navigateByUrl(this.returnUrl);
                  } else {
                      this.errorMessage$.next('Login unsuccessful');
                  }
              }, () =&gt; {
                  this.errorMessage$.next('Login unsuccessful');
              })
          }, () =&gt; {
              this.errorMessage$.next('Login unsuccessful');
          })
      }, () =&gt; {
          this.errorMessage$.next('Login unsuccessful');
      });
  }
  </code></pre>
  <p>With this code I need to write the error handling code 4 times, or create a seperate method, or pass data on to a <code>BehaviorSubject</code>. This seems to be sluggish.</p>
  <p>Something I've been considering is to use <code>await</code>:</p>
  <pre><code>async register() {
      try {
          await this.accountService.register(this.user, this.password, this.passwordConfirmation).toPromise();
          const loginResult = await this.accountService.login(this.user.email, this.password).toPromise();
          await this.accountService.csrfRefresh().toPromise();
  
          // TS2532: Object is possibly 'undefined'
          if (loginResult!.status === ELoginStatus.success) {
              this.router.navigateByUrl(this.returnUrl);
          } else {
              this.errorMessage$.next('Login unsuccessful');
          }
      } catch (exception) {
          this.errorMessage$.next('Login unsuccessful');
      }
  }
  </code></pre>
  <p>This is a lot better, but I was hoping to avoid <code>async/await</code>, and the need to use <code>.toPromise()</code> on Observables.</p>
  <p>What's the recommended way to chain these 3 api-calls?</p>