Question

我有一个非常简单的有关显式不可见Recaptcha v2渲染和执行的代码。

<html>
  <head>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> 
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <script>
  var onloadCallback = function() {
    grecaptcha.render('xrecaptcha', {
      'sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
      'size': 'invisible'
    });
  };
  </script>
  </head>
  <body>
    <div id="xrecaptcha"></div>
    <button>Submit</button>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" defer>
    </script>
  </body>
</html>
<script>
$(function(){
  $('button').click(function(){
    grecaptcha.reset();
    grecaptcha.execute()
    .then(function(){return fetch('https://jsfiddle.net');});
  });
});
</script>

一旦单击带有文本Submit的按钮，事件的顺序应为（a）重设Recaptcha；（b）执行重新捕获；（c）取东西。我试图通过使用'grecaptcha.execute（）'的可扩展功能来完成这项工作，但这完全是一团糟。

如果您通过https://jsfiddle.net/715njfpL/打开Chrome检查控制台，然后单击按钮，您将看到该顺序为（a）获取（b）重置和（c）执行。显然顺序不是我所期望的。我当时认为grecaptcha.execute()完成POST请求和响应后，将调用内部具有访存功能的函数。我在这里做什么错了？

还有一个问题，我在调试时看到的是grecaptcha.reset()不仅在重置表单字段，而且似乎正在发出XHR POST请求。因此，在这里我也需要一个可实现的承诺或某种承诺，以便实现我上面描述的事件的期望顺序。我也将在这里提供任何帮助。

grecaptcha.execute（）。then（）无法按预期工作

0 个答案: