wait for result before proceeding

Question

I'm using Google's reCaptcha V3 as part of my Angular(7) project.

I would like to wait for the Token's response before proceeding to the rest of the code and before checking whether the Token is validated or not.

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

The thing is that this.gToken is undefined because it doesn't wait to validateCaptcha to finish its job. I have also tried async and await but it didn't help. perhaps I used it wrongly.

score 7 · Accepted Answer · edited Sep 12 '22 at 11:42

7

You can use Promise here.

You need to wait until token generated.

You can also use async / await instead of 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);
              })

      })
    })
}

Update example with async / await.

While using async / await the validateCaptcha method demonstrated above remains same (must return Promise)

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

edited Sep 12 '22 at 11:42

GarySchechter

3
2

answered Feb 11 '20 at 16:24

Richardson. M

852
2
17
28

in this case, the rest of my logic code should be in the `then` clause, after the arrow function? – JumpIntoTheWater Feb 11 '20 at 16:28
@YanivEliav Yes, in the block `if(token)` – Keeleon Feb 11 '20 at 16:31
Yes, Rest of your logic in then part. – Richardson. M Feb 11 '20 at 16:31
@Richardson.M can you also give an example of `async` and `await` ? I have tried it but it didn't work.. – JumpIntoTheWater Feb 11 '20 at 16:40
@YanivEliav I have updated answer with `async / await`. Please check. – Richardson. M Feb 11 '20 at 16:53
@Richardson.M thanks. Can I use the async in a different method instead of in `ngOnInit` and call this new method from the `ngOnInit`? I don't want the async to be there. – JumpIntoTheWater Feb 11 '20 at 16:58

score 2 · Answer 2 · answered Feb 11 '20 at 16:28

Why not have validateCaptcha() return a 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();
         });
       });
    });
  }

wait for result before proceeding

2 Answers2