同步功能中的Javascript等待异步响应

Question

我想我的问题很简单，但即使搜索几天也无法弄清楚。

有我的实际情况：

我有一个表单，由于我需要条带API的响应，因此在将条带异步函数提交给我的后端之前，我想等待它返回。然后，我正在使用onsubmit="return validate_form();">标签，以便自己在javascript函数中进行管理。

<form action="/" method="get" id="test" onsubmit="return validate_test_form();">
  <button type="submit" id="iban-test" data-secret="">
    TEST
  </button>
</form>

function validate_test_form() {
  var stripe_result = stripe.confirmCardSetup(clientSecret)

  if (stripe_result.error) {
    // do things
  } else {
    // do other things
  }
  return true;
}

作为正常行为，由于条纹函数是异步的并且默认的validate_test_form函数返回为true，因此提交表单时无需等待条纹响应。我知道async / await / promise概念，但是看不到如何使用它们来等待（带有旋转器或其他功能的UI块）作为同步行为对条带的响应。

我想这种情况一定是当前的，并且必须有很多方法可以执行我想要的。无论哪种方式，您能告诉我在这种情况下的最佳实践是什么。

非常感谢您的时间。

Answer 1

是的。如果要等待条纹功能执行，则应使用promise或async / await函数。根据我的个人喜好，我发现异步/等待对于用户来说要容易得多。通常，async是用于编写基于promise的代码的函数。异步函数应始终返回一个值。 await是用于使代码等待返回promise的关键字。您只能在async函数中编写await。在您的代码上，您可以编写async / await函数，如下所示：

async function validate_test_form() {
 var stripe_result = await stripe.confirmCardSetup(clientSecret)

 if (stripe_result.error) {
// do things
 } else {
// do other things
 }
return true;  
}

如果要处理异步/等待功能的错误，请尝试使用try / catch块包装等待状态>>

Answer 2

您需要立即从false返回validate_test_form()（这将取消提交操作），并在有Stripe的响应可用时提交表单。