等待结果后再继续操作。

Question

我正在我的Angular（7）项目中使用Google的reCaptcha V3。

我希望在继续执行代码和检查Token是否验证之前，等待Token的响应。

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，但没有帮助。也许我用错了。

- JumpIntoTheWater

Answer 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) {
    }
    
}

- Richardson. M

---

在这种情况下，我的逻辑代码应该在箭头函数后的then子句中吗？ - JumpIntoTheWater

@YanivEliav 是的，在代码块 if(token) 中。 - Keeleon

是的，在“then”部分编写您的其余逻辑。 - Richardson. M

@Richardson.M，你能否给一个async和await的例子吗？我尝试过了，但它没有起作用。 - JumpIntoTheWater

@YanivEliav 我已经使用async/await更新了答案。请查看。 - Richardson. M

@Richardson.M 谢谢。我可以在 ngOnInit 之外的另一个方法中使用异步吗？然后再从 ngOnInit 中调用这个新方法？我不想让异步出现在 ngOnInit 中。 - JumpIntoTheWater

Answer 2

为什么不让validateCaptcha()返回一个Promise呢？

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();
         });
       });
    });
  }

- Keeleon