如何强制事件回调等待异步调用解决？

Question

我有一个监听名为的事件的表单onBeforeSubmit。当我提交表单时会触发此事件，但如果回调返回，则会停止提交false。

问题

我的回调涉及对 API 的异步调用。在决定是否返回 false 之前，如何强制事件等待承诺解决？目前它不等待解决fetch()- 我已经尝试了两种async/await方法.then()......

尝试1：

onBeforeSubmit: async (e) {
  const res = await fetch(url);
  // if res value fails some condition
  return false
}

尝试2：

onBeforeSubmit: (e) {
  fetch(url).then( res => {
  // if res value fails some condition
  return false
  })
}

难道不应该await强制 javascript 等待 fetch 解析后再继续下一行吗？

我还注意到，每当我输入关键字时async，它都会忽略该return false语句并继续提交。是什么原因造成的？

编辑：这是第 3 方 API，因此我无法控制 onBeforeSubmit 的行为:(

Answer 1

您有一个需要同步返回值的事件处理程序，但您尝试在该回调中运行异步操作。这在 Javascript 中是行不通的。

当您运行异步函数时，回调函数将立即返回，并且异步函数将在其自己的回调中完成。如果您标记回调async，则意味着它立即返回一个承诺。由于onBeforeSubmit事件处理程序期望返回一个布尔值，而不是一个承诺，因此它无法正常工作。

Javascript 中无法让此回调“等待”，因此它可以同步返回布尔值。

解决这个问题的通常方法是始终返回false，这样表单就不会自动提交。然后，运行异步操作，如果成功，则可以从该异步完成回调中手动提交表单（无需进一步验证）。