如何使異步javascript函數同步

Question

給定一個按鈕，它的點擊動作設置為（在alpinejs中）

<button x-on:click.prevent|debounce.3s="response = run();" type="button">Run</button>

當run()函數定義如下：

function run() {
  // captcha();
  let data = input();
  data = confirm(data);
...
  data = request(url, data);
  return data;
}

它是一個同步函數，並且運行良好。

recaptcha 文檔 ( https://developers.google.com/recaptcha/docs/v3 ) 指出，如果要使用 recaptcha 保護按鈕單擊，則它必須如下所示：

async function captcha() {
  let resp;
  grecaptcha.ready(function() {
    grecaptcha.execute(recaptcha_site_key, {action: 'run'}).then(function(token) {
        console.log(token);
        resp = run();
    });
  });
  return resp;
}

如果點擊動作設置為：

<button x-on:click.prevent|debounce.3s="response = await captcha();" type="button">Run</button>

它導致此錯誤：

你能告訴我我做錯了什么嗎？

編輯：在captcha函數中添加了返回語句

Answer 1

對於與我處於相同情況的其他人，這是解決方案。

第一步，我制作了captcha函數來返回一個承諾

function captcha() {
    return new Promise(function(resolve, reject) {
      grecaptcha.ready(function() {
        grecaptcha.execute(recaptcha_site_key, {action: 'run'}).then(function(token) {
          resolve(token);
        });
      });
    });
}

第二步，異步/等待變量可用

async function run() {
  let g_recaptcha_response = await captcha();
  document.forms['params'].elements['g_recaptcha_response'].value = g_recaptcha_response;
  let data = input();
  data = confirm(data);
  if (data['error'] === true) {
    return data;
  }
  let url = `${origin}/app/json`;
  data = request(url, data);
  // note: preparing for input / next request.
  document.forms['params'].elements['token_id'].value = data['token_id'];
  return data;
}

第三步，在頂層創建一個IIFE

(async function(){ let response = await run(); })();