时间戳

首页 > 解决方案 > 在 Angular 9 中等待对象响应

angular - 在 Angular 9 中等待对象响应

问题描述

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

我是 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);
}

非常感谢！

标签： angulartypescriptweb-applicationsfrontend

解决方案

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

这就是你如何通过返回一个承诺来做到这一点 

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 返回一个承诺，我们可以使用 async/await

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

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

推荐阅读