Angular中service.ts向component.ts传数据时的逻辑错误

问题描述 #

开发书店项目的注册功能时，调用AuthService的register()方法后，首次提交触发错误时，组件的errMsg无法即时获取错误信息并显示；第二次提交时错误信息才正常显示。

核心原因 #

createUserWithEmailAndPassword是异步Promise操作，当前服务中的register()方法在触发该异步请求后，立刻返回初始值为空的this.errMsg——此时异步请求的catch块还未执行，错误信息还未被赋值。第二次提交时，上一次异步请求的catch块已经完成执行，this.errMsg被赋值为错误信息，因此能被组件获取到。

解决方案 #

修改服务和组件的代码，让异步操作的结果能被正确等待并返回：

1. 修改AuthService，让register返回Promise

export class AuthService {
  constructor() { }

  isLoading: boolean = false;
  
  // 改为异步方法，返回错误信息的Promise
  async register(form: RegisterForm): Promise<string> {
    this.isLoading = true;
    const auth = getAuth();
    
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, form.email, form.password);
      console.log(userCredential);
      return ''; // 注册成功时返回空字符串
    } catch (error: any) {
      // 捕获错误并返回错误信息
      return error.message;
    } finally {
      this.isLoading = false;
    }
  }
}

2. 修改RegisterComponent的submit方法，等待异步结果

export class RegisterComponent {
  constructor(private authService: AuthService) { }

  form: RegisterForm = {
    email: '',
    password: '',
    confirm_password: ''
  }
  
  passwordMatched: boolean = true;
  
  errMsg: string = '';
  isLoading: boolean = false;

  async submit() {
    if(this.isLoading) {return;}

    this.isLoading = true;
    this.errMsg = ''; // 清空上次错误信息
    this.passwordMatched = true; // 重置密码匹配状态
    
    if(this.form.password !== this.form.confirm_password) {
      this.passwordMatched = false;
      this.isLoading = false;
      return;
    }

    // 等待异步注册请求完成，获取错误信息
    this.errMsg = await this.authService.register(this.form);
    
    this.isLoading = false;
  }
}

模板代码保持不变

<div *ngIf="errMsg != '' ">
      {{errMsg}}
</div>

说明 #

• 通过async/await让组件等待异步请求完成后再获取错误信息，确保数据的及时性。
• 移除了服务中维护的errMsg状态变量，让组件自行管理错误状态，更符合Angular组件化设计原则。
• 代码可读性更高，异步逻辑更清晰。

内容的提问来源于stack exchange，提问作者Harsh Sonar