使用Promise结合submit()提交表单为何无法按预期执行？

嘿，咱们来一步步拆解你代码里的问题，看看为啥没法按预期执行：

1. 低级语法错误：用了wait而非await #

在async函数里等待Promise完成，必须用await关键字——JS里根本没有wait这个语法，写wait会直接抛出语法错误，导致整个test函数都没法正常执行。

2. submitForm的Promise逻辑有大问题 #

首先你创建了Promise，但从头到尾没调用resolve()，就算表单提交成功，这个Promise也永远不会进入完成状态；更致命的是：调用form.submit()会触发浏览器的默认页面刷新行为，一旦页面刷新，当前页面的所有JS代码都会终止执行，后面的打印、等待逻辑根本没机会运行。

3. HTML表单的属性写错了 #

你给form标签加了type="hidden"，这是完全无效的属性——表单的type属性不是这么用的，正确的做法是设置method（提交方式）和action（提交地址）。

修复后的完整代码 #

如果你的需求是提交表单但不刷新页面，这样后续逻辑能继续执行，试试下面的代码：

JavaScript部分

function sleep(ms) { 
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 重构submitForm：阻止页面刷新，正确处理Promise
function submitForm() {
  return new Promise((resolve) => {
    const form = document.getElementById('form');
    // 监听提交事件，阻止默认刷新
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      console.log('表单提交完成（已阻止页面刷新）');
      resolve();
    }, { once: true }); // 只监听一次提交，避免重复绑定

    // 触发表单提交
    form.submit();
  });
}

async function test() {
  await submitForm(); // 替换成正确的await
  console.log("Print me.");
  await sleep(3000);
  console.log("Print me too.");
}

test();

HTML部分

<form id="form" method="POST" action="#">
  <input value="" id="id" type="text">
  <input value="Submit" type="submit">
</form>

额外说明 #

如果你本来就想提交表单并让页面刷新，那后面的打印和等待逻辑是不可能执行的——页面刷新后，当前的JS执行上下文会被完全销毁，所有未完成的代码都会终止。这种情况下你需要调整实现方式：比如用AJAX异步提交表单（不刷新页面），或者在后端处理完表单后，在新页面里执行后续逻辑。

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