等待结果再继续答案

【问题标题】：wait for result before proceeding等待结果再继续
【发布时间】：2020-05-27 02:19:39
【问题描述】：

我正在使用 Google 的 reCaptcha V3 作为我的 Angular(7) 项目的一部分。

我想等待令牌的响应，然后再继续执行其余代码并检查令牌是否已验证。

declare var grecaptcha: any;

  ngOnInit() {
    this.validateCaptcha();
    if(this.gToken)
    {
      ...
    }
  }
  gToken:string;
  validateCaptcha()
  {
    let self = this;
    grecaptcha.ready(function() {
    grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token){
      self.gToken = token;
    });
});
  }

问题是this.gToken 是未定义的，因为它不会等到validateCaptcha 完成它的工作。我也尝试过async 和await，但没有帮助。可能是我用错了。

【问题讨论】：

标签： javascript angular recaptcha-v3

【解决方案1】：

你可以在这里使用 Promise。

您需要等到生成令牌。

你也可以使用 async / await 代替 Promise。

ngOnInit() {
   this.validateCaptcha().then(token => { // Here wait token generated
      if(token) {
      }
   })
}

validateCaptcha() {
    return new Promise((res, rej) => {
      grecaptcha.ready() => {
              grecaptcha.execute('reCAPTCHA_site_key', {action: 
                 'homepage'}).then((token) => {
                  return res(token);
              })

      })
    })
}

使用 async / await 更新示例。

在使用 async / await 时，您的 validateCaptcha 方法保持不变（必须返回 Promise）

async ngOnInit() {  // async keyword added here
    try {
        let token = await this.validateCaptcha();  // await keyword added here
        if(token) {
        }
    } catch(e) {
    }

}

【讨论】：

在这种情况下，我的其余逻辑代码应该在then 子句中，在箭头函数之后？
@YanivEliav 是的，在区块if(token)
是的，剩下的逻辑在后面。
@Richardson.M 你能举一个async 和await 的例子吗？我试过了，但是没用。。
@YanivEliav 我已经用async / await 更新了答案。请检查。

【解决方案2】：

为什么不让 validateCaptcha() 返回一个承诺？

declare var grecaptcha: any;

  ngOnInit() {
    this.validateCaptcha().then(() => {
        if(this.gToken)
        {
          ...
        }
    });
  }
  gToken:string;
  validateCaptcha()
  {
    let self = this;
    return new Promise((resolve, reject) => {
        grecaptcha.ready(function() {
            grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token){
            self.gToken = token;
            resolve();
         });
       });
    });
  }

【讨论】：