嵌套Map搭配Promise.all无法等待异步操作完成的原因解析

两种写法的差异对比 #

失效的嵌套map初始写法

async function batchAttach(items, files) {
  await Promise.all(items.map(item => {
    // 内层map生成了Promise数组，但外层map的回调未返回该数组
    files.map(file => {
      const formData = new FormData();
      formData.append('itemId', item.id);
      formData.append('file', file);
      return server.addAttachment(formData);
    });
  }));
}

有效的forEach收集Promise写法

async function batchAttach(items, files) {
  const promiseList = [];
  items.forEach(item => {
    files.forEach(file => {
      const formData = new FormData();
      formData.append('itemId', item.id);
      formData.append('file', file);
      promiseList.push(server.addAttachment(formData));
    });
  });
  await Promise.all(promiseList);
}

失效核心原因 #

问题出在外层map的回调没有返回内层map生成的Promise数组：

• 内层files.map(...)确实会遍历每个文件，生成包含server.addAttachment异步Promise的数组，但这个数组没有被外层items.map(...)的回调函数返回。
• 外层Promise.all最终接收的是一个由undefined组成的数组（外层map回调无return值时默认返回undefined），Promise.all遇到这类数组会直接resolve，完全不会等待那些实际的异步上传操作完成。

嵌套map方案的正确修复写法 #

如果想保留嵌套map的写法，需要让外层map返回内层map的结果，再将二维Promise数组扁平化后传给Promise.all：

async function batchAttach(items, files) {
  await Promise.all(
    items.map(item => {
      // 必须返回内层map生成的Promise数组
      return files.map(file => {
        const formData = new FormData();
        formData.append('itemId', item.id);
        formData.append('file', file);
        return server.addAttachment(formData);
      });
    }).flat()
  );
}

或者用嵌套的Promise.all，让外层Promise.all等待每个item对应的所有文件上传完成：

async function batchAttach(items, files) {
  await Promise.all(
    items.map(item => {
      return Promise.all(
        files.map(file => {
          const formData = new FormData();
          formData.append('itemId', item.id);
          formData.append('file', file);
          return server.addAttachment(formData);
        })
      );
    })
  );
}

总结 #

forEach方案能正常工作，是因为它主动把所有异步操作的Promise实例收集到了同一个数组，Promise.all可以明确等待所有实例完成。而初始的嵌套map方案，因遗漏外层map的return语句，导致Promise.all未拿到需要等待的Promise集合，自然不会等待异步任务结束。

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