如何使用Promise等待异步函数执行完成后再运行后续代码？

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

• forEach循环内发起的17次数据库查询都是异步操作，不会阻塞后续代码执行，你在循环结束后立刻调用resolve()时，所有查询都还没有返回结果，eventData自然还没被写入数据
• 你写的getEventData().then(console.log(eventData))本身语法逻辑错误：相当于调用getEventData的同时就立刻执行了console.log(eventData)，不是等Promise状态变更后再执行

建议用Promise.all收集所有异步查询的Promise，等待全部执行完成后再返回结果，不需要手动封装Promise实例，也不用依赖外部全局变量存储结果，写法更稳妥：

function getEventData() {
  // 用map收集每一次数据库查询返回的Promise
  const queryPromises = eventList.map((event) => {
    return db.collection('Events').doc(event)?.collection('registeredStudents')?.get()
      .then((querySnapshot) => {
        // 直接返回单条查询结果
        return {"id": event, "number": querySnapshot.size}
      })
  })
  // Promise.all会等待所有查询完成后，按顺序返回所有结果的数组
  return Promise.all(queryPromises)
}

// then中传入回调函数，等Promise完成后才会执行打印逻辑
getEventData().then((eventData) => {
  console.log(eventData)
  // 所有依赖eventData的后续逻辑都要写在这个回调内
})

如果一定要保留用外部变量存储eventData的写法，可以用下面的版本：

let eventData = []
function getEventData() {
  const queryPromises = eventList.map((event) => {
    return db.collection('Events').doc(event)?.collection('registeredStudents')?.get()
      .then((querySnapshot) => {
        eventData.push({"id": event, "number": querySnapshot.size})
      })
  })
  return Promise.all(queryPromises)
}

getEventData().then(() => {
  console.log(eventData)
})

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