React中如何顺序执行函数？Firebase上传后创建文档方案

一、纯Promise实现 #

你的代码里map会生成一组上传任务的Promise，但没有等待它们完成就直接执行createDocInFb了。用Promise.all就能解决这个问题——它会等待所有传入的Promise都完成后再继续执行后续逻辑：

const abc = () => {
  // 把所有上传任务的Promise收集到数组里
  const uploadTasks = array.map(() => uploadFilesToFb());

  // 等待所有上传完成，再执行文档创建
  Promise.all(uploadTasks)
    .then(() => {
      createDocInFb();
    })
    .catch(err => {
      // 处理上传过程中出现的错误
      console.error('文件上传出错:', err);
    });
};

如果createDocInFb本身也是异步操作（比如内部的addDoc返回Promise），可以把它也加入链式调用，方便统一处理错误：

const abc = () => {
  const uploadTasks = array.map(() => uploadFilesToFb());

  Promise.all(uploadTasks)
    .then(() => createDocInFb())
    .then(() => console.log('文档创建成功'))
    .catch(err => console.error('上传或创建文档失败:', err));
};

二、更直观的async/await写法 #

这本质还是基于Promise的语法糖，但代码结构更像同步逻辑，可读性更高：

const abc = async () => {
  try {
    // 等待所有上传任务全部完成
    await Promise.all(array.map(() => uploadFilesToFb()));
    // 上传完成后执行文档创建
    await createDocInFb();
    console.log('所有操作完成');
  } catch (err) {
    // 统一处理上传或创建文档时的错误
    console.error('操作失败:', err);
  }
};

三、容错性更强的处理方式 #

如果业务允许部分文件上传失败后仍创建文档，可以用Promise.allSettled替代Promise.all——它会等待所有Promise完成（不管成功还是失败），你可以在后续逻辑里筛选出失败的任务做处理：

const abc = async () => {
  const uploadResults = await Promise.allSettled(array.map(() => uploadFilesToFb()));
  
  // 筛选出上传失败的任务
  const failedUploads = uploadResults.filter(res => res.status === 'rejected');
  if (failedUploads.length > 0) {
    console.warn('部分文件上传失败:', failedUploads);
  }

  // 继续执行文档创建
  await createDocInFb();
};

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