Next.js中使用form表单提交调用Ethereum API执行中断如何解决？

这个bug是三个问题共同导致的：

• 没有阻止表单提交的默认行为：HTML表单默认提交后会刷新整个页面，你触发submit事件后浏览器直接重载，所有正在运行的异步API调用都会被直接中止，这是最核心的原因。
• 异步函数没有加await等待执行：withdrawETH和depositETH都是async异步函数，你在zkSyncToZKSwap里直接调用没有加await，函数不会等待这两个异步逻辑执行完成就会结束，再配合页面刷新，自然看不到后续的日志输出。
• 事件对象没有显式传入：zkSyncToZKSwap函数没有定义event形参，直接使用全局event对象存在兼容性问题，部分场景下会取不到输入值。

你只需要修改zkSyncToZKSwap函数的逻辑即可：

async function zkSyncToZKSwap(event) {
  // 第一步：阻止表单默认提交刷新行为
  event.preventDefault();
  console.log("hello1");
  console.log("amount = ", event.target.amount.value);
  // 第二步：给异步函数加await，如果需要两个函数并行可以用Promise.all
  await withdrawETH();
  await depositETH();
}

如果你的业务场景允许withdrawETH和depositETH并行执行，可以改成：

async function zkSyncToZKSwap(event) {
  event.preventDefault();
  console.log("hello1");
  console.log("amount = ", event.target.amount.value);
  await Promise.all([withdrawETH(), depositETH()]);
}

修改完后表单提交就不会触发页面刷新，异步API的逻辑也可以正常执行完成。

内容的提问来源于stack exchange，提问作者user16697491