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

Question

我有一个表单可以监听名为 onBeforeSubmit 的事件。当我提交表单时触发此事件，但如果回调 returns false.

将停止提交

问题

我的回调涉及对 API 的异步调用。在决定 return 是否为 false 之前，如何强制事件等待 promise 解决？目前它不等待 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 等到提取解决后再继续下一行吗？

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

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

Answer 1

您有一个需要同步 return 值的事件处理程序，但您正试图在该回调中运行一个异步操作。这在 Javascript.

中行不通

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

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

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

Answer 2

我建议，使用 event.preventDefault() 停止提交表单，然后发出您的 fetch 请求，如果响应值为 false，那么表单一开始就没有提交，否则您在提交时删除了表单的事件监听器，然后添加了一个新的事件监听器来提交表单

这是您的代码的示例

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()
 }
}

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

How to force an event callback to wait until async call is resolved?

javascript

asynchronous

promise

dom-events

async-await

问题

我尝试了什么：