如何正确使用Promise.all结合forEach发送Cloud Firestore请求？

问题根源 #

你当前的代码存在两个核心问题：

1. forEach 不支持异步等待：即使在 forEach 回调前加了 await，forEach 也不会等待每个异步操作完成，会直接遍历完所有元素继续执行后续代码。
2. 手动包装的 Promise 提前 resolve：外层的 Promise 在 forEach 遍历完成后立即调用了 resolve()，但此时内部的 setTimeout（或上传操作）还没执行完毕，导致 after 先被打印。

修正后的模拟代码（符合期望输出） #

将每个异步操作包装成 Promise，再用 Promise.all 等待所有操作完成：

const functionO = async () => {
  try {
    console.log('before')
    const datas = [1,2,3]
    // 把每个setTimeout包装为Promise
    const promises = datas.map(d => new Promise(resolve => {
      setTimeout(() => {
        console.log(d)
        resolve()
      }, 1000)
    }))
    // 等待所有Promise执行完成
    await Promise.all(promises)
    console.log('after')
  } catch (err) {
    console.error(err)
  }
}

输出结果：

before
1
2
3
after

（注：数字顺序可能因并发调度略有不同，但一定会在 after 之前全部打印）

适配图片上传的最终代码 #

针对你实际的Firebase存储上传需求，同样用 Promise.all 实现并发上传，且任一上传失败时立即终止后续逻辑：

const functionO = async () => {
  try {
    console.log('before')
    // 生成所有上传操作的Promise数组
    const uploadPromises = images.map(async (image) => {
      // 校验图片类型
      const extension = image?.type?.split('/')[1]
      if (!extension) {
        throw new Error('无法识别图片格式')
      }
      // 创建存储引用
      const reference = storage().ref(
        `receitas/${userInfo?.uid}/uid.${extension}`
      )
      // 等待上传完成（putFile返回的UploadTask支持await）
      await reference.putFile(file)
    })
    // 等待所有上传完成，任一失败则进入catch
    await Promise.all(uploadPromises)
    console.log('after')
  } catch (err) {
    console.error('图片上传失败:', err)
    // 这里可添加错误提示、清理等逻辑
  }
}

关键说明 #

• Promise.all 的错误处理：只要数组中有一个 Promise 失败，Promise.all 会立即抛出该错误，后续代码（如 console.log('after')）不会执行，完全符合你「任一失败则终止后续逻辑」的需求。
• 避免手动包装冗余Promise：无需在外层手动创建新的 Promise，直接用 await Promise.all(...) 即可实现等待所有异步操作的效果。
• Firebase UploadTask 处理：putFile 返回的 UploadTask 是可等待的对象，直接用 await 就能等待上传完成，无需额外转换。

内容的提问来源于stack exchange，提问作者Nilton Schumacher F