Question

在我的angular 7应用程序中，我有一个登录组件，该组件从auth服务中调用登录功能。登录功能执行http发布请求，然后订阅响应。我想在auth服务功能和组件功能中都订阅它，因此，如果用户未输入正确的凭据，则组件可以在等待请求完成时告诉用户+一个加载微调器。

登录组件：

 onSignIn() {
    if (this.signinForm.invalid) {
      return;
    }
    this.failedSignIn = null;
    this.isLoading = true;
    this.authService.signin(this.signinForm.value.email, this.signinForm.value.password);
    this.isLoading = false;

  }

在Auth服务中登录功能：

 signin(email: string, password: string) {
    const signinData = {email: email, password: password};
       this.http.post<{userEmail: string, userId: string, token: string, refreshToken: string, expiresIn: number, userType: string }>(URL + 'signin', signinData).subscribe(response => {
        // I do stuff in here
      });
  }

本质上我想做什么

  onSignIn() {
    if (this.signinForm.invalid) {
      return;
    }
    this.failedSignIn = null;
    this.isLoading = true;
    this.authService.signin(this.signinForm.value.email, this.signinForm.value.password).subscribe(res => {
    this.isLoading = false;
    this.isAuth = res.isAuth;
});
  }

Answer 1

您可以只从auth服务返回observable，然后在组件中进行订阅。如果您想让服务使用一堆东西，则可以在auth服务中编写一个函数，该函数可以从该组件的订阅中调用。

尝试在多个位置订阅http调用（假设有可能）是个坏主意。

身份验证服务

signin(email: string, password: string) {
   const signinData = {email: email, password: password};
   return this.http.post<{userEmail: string, userId: string, token: string, refreshToken: string, expiresIn: number, userType: string }>(URL + 'signin', signinData);
} 

doStuff(){/*do stuff*/}

组件

onSignIn() {
   if (this.signinForm.invalid) {
      return;
   } 
   this.failedSignIn = null;
   this.isLoading = true;
   this.authService.signin(this.signinForm.value.email, this.signinForm.value.password)
      .subscribe(res => {
          //do stuff if you want
          this.authService.doStuff();
          this.isLoading = false;
          this.isAuth = res.isAuth;
      });
}

两次订阅服务功能以进行登录

1 个答案: