表单提交完成后触发滚动到视图的Promise实现问题排查

咱们来一步步拆解你的问题哈：

核心问题1：Promise没有正确触发表单提交 #

你的submitForm函数返回的是Promise.resolve(() => form.submit())——这相当于把一个未执行的函数作为Promise的resolved值，而不是真正执行表单提交。当你await submitForm(form)时，只是拿到了这个函数，但根本没调用它，所以表单其实完全没提交，更别说等待提交完成了😅。

核心问题2：普通表单提交会导致页面刷新 #

就算你手动执行了form.submit()，默认的表单提交是同步操作，会直接刷新页面——这时候后续的.then()代码根本没机会运行，页面都跳走了，自然无法执行滚动操作。

修复后的代码 #

要实现「提交完成后执行滚动」，我们需要用异步表单提交（避免页面刷新），同时让Promise正确跟踪提交的完成状态：

function submitForm(form) { 
  console.log("submitForm: ", form); 
  // 用FormData收集表单数据
  const formData = new FormData(form);
  // 用fetch异步提交表单，返回Promise跟踪状态
  return fetch(form.action, {
    method: form.method || 'POST',
    body: formData
  }).then(response => {
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`提交失败：${response.status}`);
    }
    return response;
  });
} 

async function submitFm (form) { 
  console.log("submitFm: ", form); 
  // 等待异步提交完成
  await submitForm(form); 
}; 

submitButton.addEventListener("click", (e) => { 
  // 阻止默认的表单提交行为（避免页面刷新）
  e.preventDefault();
  
  submitFm(form)
    .then(() => { 
      console.log("should display after submit is done!"); 
      // 执行滚动到指定div的操作，替换成你的目标ID
      document.getElementById('target-div').scrollIntoView({ behavior: 'smooth' });
    })
    .catch(error => {
      // 处理提交失败的情况
      console.error('表单提交出错：', error);
    }); 
});

关键改动说明 #

1. 用fetch实现异步提交：替代默认的form.submit()，这样页面不会刷新，后续代码能正常执行。
2. 正确返回Promise：submitForm现在返回的是fetch的Promise，会等待请求完成（成功或失败）。
3. 阻止默认行为：在按钮点击事件中调用e.preventDefault()，避免浏览器触发默认的同步表单提交。
4. 添加错误处理：用.catch()捕获提交过程中的网络错误或请求失败，避免代码崩溃。

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