等待 Angular 9 中的对象响应

Question

这是我第一次在这里发帖，所以如果我做错了什么，我首先道歉。

我是 Angular 的新手，我从未使用过同步，所以请尽可能简单。

我的服务中有这个功能：

 validateDDBB(userName, teamName, email: string) {
    let requestUrl: string = '/api/tenniship/validator/user?userName=' + userName + '&teamName=' + teamName + '&email=' + email;
    const config = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
    return this.http.get<Array<boolean>>(requestUrl, config);
  }

我想要一个注册表单。 我想知道我的数据库中是否已经注册了电子邮件、用户名和团队名称。 此函数向我发送一个大小为 3 的布尔数组，指示它们是否已经存在。

问题是运行的代码没有等待响应，所以得到的结果使用了垃圾数据。

我的组件功能：

databaseValidator(){
    this.loginService.validateDDBB(this.username, this.teamName, this.email).subscribe(
      res => {
        this.usedUsername = res[0].valueOf();
        this.usedTeamName = res[1].valueOf();
        this.usedEmail = res[2].valueOf();
        console.log("Data base info pulled: " + res);
        return true;
      },
    error => {
      console.error("Something went wrong: undefined: " + error);
      return false;
    }
    );
  }

我如何修改我的代码，例如，当我这样做时，我的代码将等待响应，所以我不使用垃圾数据？

onSubmit(){
    this.databaseValidator();
    //usedUsername, usedTeamName and usedMail are primitive boolean variables.
    console.log("Username: " + this.usedUsername);
    console.log("Team: " + this.usedTeamName);
    console.log("email: " + this.usedEmail);
}

非常感谢！

Answer 1

databaseValidator方法将立即然后控制台消息将在稍后打印 loginService 将被编译，有一些选项可以解决您的问题，例如传递回调，返回可观察或承诺

这是你如何通过返回承诺来做到的

databaseValidator() : Promise<any> {
   return new Promise((resolve, reject) => {
    this.loginService.validateDDBB(this.username, this.teamName, this.email).subscribe(
      res => {
        this.usedUsername = res[0].valueOf();
        this.usedTeamName = res[1].valueOf();
        this.usedEmail = res[2].valueOf();
        console.log("Data base info pulled: " + res);
        resolve()
      },
    error => {
      console.error("Something went wrong: undefined: " + error);
      reject()
    }
    );
  }

onSubmit(){
    this.databaseValidator().then(()=>{

    console.log("Username: " + this.usedUsername);
    console.log("Team: " + this.usedTeamName);
    console.log("email: " + this.usedEmail);
    })  
}

因为databaseValidator 返回一个promise 我们可以使用async/await

async onSubmit(){
    await this.databaseValidator();

    console.log("Username: " + this.usedUsername);
    console.log("Team: " + this.usedTeamName);
    console.log("email: " + this.usedEmail); 
}