表单验证函数main中等待多Ajax上传结果的非嵌套实现方法

核心方案：使用async/await语法 #

这是目前最简洁的实现方式，能让你在当前函数内等待所有异步Ajax操作完成，避免回调嵌套，同时不会阻塞主线程。

第一步：修正UploadFile函数的Promise返回值 #

你原代码中success/error回调里的return不会传递给Promise的最终结果，需要用then/catch处理，让Promise最终返回true或false：

function UploadFile(inputId){
  return $.ajax({
    // 填写你的Ajax参数（url、type、data等）
  })
  .then(IDUpload => IDUpload > 0) // 上传成功且ID有效返回true，否则false
  .catch(() => false); // 网络或接口错误返回false
}

第二步：改造main函数为async函数，用await Promise.all()等待结果 #

把main标记为async，用Promise.all收集所有上传请求的Promise实例，通过await等待全部完成后直接获取结果数组：

async function main(){
  // 执行前置验证逻辑

  // 收集所有上传请求的Promise
  const uploadTasks = [
    UploadFile('input_1'),
    UploadFile('input_2'),
    // ...
    UploadFile('input_n')
  ];

  // 等待所有上传完成，拿到每个上传的结果（true/false组成的数组）
  const uploadResults = await Promise.all(uploadTasks);

  // 直接处理结果，比如判断是否全部上传成功
  const allUploadOK = uploadResults.every(result => result === true);

  // 执行后续验证逻辑

  // 根据所有验证结果返回true或false
  return allUploadOK && /* 其他前置/后置验证的条件 */;
}

第三步：处理表单提交的异步验证问题 #

因为async函数返回的是Promise，直接作为表单onsubmit函数会导致表单直接提交（不会等待验证完成），需要绑定异步的提交事件处理函数，手动控制提交：

// 假设你的表单ID是form-upload
document.getElementById('form-upload').addEventListener('submit', async function(e) {
  e.preventDefault(); // 先阻止默认提交行为

  const isFormValid = await main(); // 等待验证全部完成

  if (isFormValid) {
    this.submit(); // 验证通过，手动提交表单
  }
});

方案优势 #

• 无回调嵌套：所有逻辑在main函数内按顺序执行，和同步代码逻辑一致，避免“回调地狱”
• 不阻塞主线程：await只是暂停当前async函数的执行，不会卡住页面
• 完全替代$.when()或Promise.all().then()的回调写法，代码更易读维护

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