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

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，因此不会自动提交表单。然后，运行您的异步操作，如果成功，则您从该异步完成回调中手动提交表单（无需进一步验证）。

Answer 2

我建议，使用event.preventDefault() 停止提交表单，然后发出fetch 请求，如果响应值为false，则首先没有提交表单，否则删除表单的事件监听器onsubmit 然后你添加一个新的事件监听器来提交表单

这是您的代码应该是什么样子的示例

var submitform=function sbmform(e){
  e.preventDefault()
  fetchvalue()
}
const form = document.getElementById('myform')
form.addEventListener('submit',submitform,false)

async function fetchvalue(){
  const res = await fetch(url);
 if (res=="to conditon"){  // set your condfiton
       return false
  }
 else{
  form.removeEventListener('submit', submitform, false);
  form.submit()
 }
}