如何链接/组合 Observables

Question

好吧，这一直困扰着我一段时间，想知道是否有人可以向我展示一种在多个服务之间链接 Observables 的好方法。

在下面的 Auth 类示例中，什么是从 this.api.postSignIn() 创建 Observable 以便 signInSubmit() 可以在组件中订阅它的好方法？值得注意的是，this.api.postSignIn() 正在订阅一个 Angular2 http 请求。

这有点反模式吗？有更好的方法吗？

基本上我想要实现的功能是：

• 组件 - 负责收集登录数据并将其以正确的格式发送到身份验证服务。然后在 Auth 登录完成后导航到管理页面。

• 服务 - 调用 api 获取令牌，通过令牌服务设置令牌并设置 isSignedIn bool 然后将控制权交给调用组件。

  @Component({...})
  export class SignIn {
     private signIn:SignInModel = new SignInModel();
  
      constructor(private auth:Auth, private router:Router) {
      }
  
      ngOnInit() {
      }
  
      signInSubmit() {
          this.auth.signIn(this.signIn)
              .subscribe(
                  () => {
                      this.router.navigate(['/admin']);
                  }
             )
      }
  
  }
  
  @Injectable()
  export class Auth {
      private isSignedIn:boolean = false;
  
      constructor(private api:Api, private tokenService:TokenService) {
  
      }
  
      public signIn(signIn:SignInModel) {
  
         return this.api.postSignIn(signIn)
              .subscribe(
                  response => {
                      this.tokenService.set(new TokenModel(response.token));
                      this.isSignedIn = true;
                  },
                  error => {
                      console.log(error);
                  }
              );
      }
  
      public signOut() {
  
     }
  }
  

Answer 1

我会利用do 和catch 运算符，而不是在signIn 方法中订阅。

这里是重构的signIn 方法：

public signIn(signIn:SignInModel) {
   return this.api.postSignIn(signIn)
        .do(
            response => {
                this.tokenService.set(new TokenModel(response.token));
                this.isSignedIn = true;
            })
        .catch(
            error => {
                console.log(error);
            }
        );
}

在您的情况下，您无法订阅此方法的返回对象，因为 subscribe 方法返回订阅而不是可观察对象。所以你不能订阅它...