如何等待Cloudflare Turnstile的turnstile.execute执行完成？

turnstile.execute本身是基于回调的API，并非Promise，所以直接在async函数里调用它不会自动等待验证流程完成。要实现await等待的效果，你可以把它包装成一个Promise：

// 把execute包装成支持await的Promise函数
function executeTurnstile() {
  return new Promise((resolve, reject) => {
    turnstile.execute('#your-widget-container', {
      execution: 'execute',
      callback: (token) => {
        token ? resolve(token) : reject(new Error('Turnstile验证失败'));
      },
      // 可选：捕获验证过程中的错误
      'error-callback': (error) => {
        reject(new Error(`Turnstile验证出错: ${error}`));
      }
    });
  });
}

// 在按钮点击的async函数里使用
async function handleButtonClick() {
  try {
    const token = await executeTurnstile();
    // 拿到token后执行后续业务逻辑，比如提交表单、调用接口
    console.log('验证成功，token:', token);
  } catch (err) {
    console.error('验证失败:', err.message);
    // 这里可以写错误提示逻辑，比如告知用户重新验证
  }
}

关键说明：

• 将turnstile.execute的调用包裹在Promise内部，通过callback触发resolve返回token，error-callback触发reject抛出错误
• 在async函数里用await调用包装后的函数，就能等待验证完成再执行后续代码
• 记得把#your-widget-container替换为你实际的Turnstile容器选择器

内容的提问来源于stack exchange，提问作者Hyrial