为何第二种方法变体中.then()未执行？Firebase异步函数问题排查

问题核心 #

第二个函数getGroupList出现.then()代码块未按预期执行、无法获取snapshot值的情况，本质是异步操作未等待就提前返回结果：

• getGroupList是async函数，但调用database().ref().once('value')时未添加await，这行代码会立即返回一个Promise，函数会直接执行到return data，此时data还是初始的undefined；而.then()内的代码要等异步操作完成后才会执行，所以返回的结果并非预期的snapshot值。
• 第一个函数getLessons因为在database()调用前加了await，会等待异步操作完成后再继续执行，因此.then()里的代码能正常赋值并输出结果。

修复方案 #

有两种简洁的修复方式：

方式1：为异步操作添加await #

useEffect(() => {
  // useEffect回调不能直接是async函数，需内部包裹async函数执行
  const fetchGroupData = async () => {
    const list = await getGroupList();
    console.log(list);
  };
  fetchGroupData();
}, [])

async function getGroupList() {
  let data;
  // 添加await等待异步操作完成
  await database()
    .ref(`PI20/0/days`)
    .once('value')
    .then(snapshot => {
      console.log(snapshot.val());
      data = snapshot.val();
    })

  return data;
}

方式2：用async/await替代.then()（更推荐） #

useEffect(() => {
  const fetchGroupData = async () => {
    const list = await getGroupList();
    console.log(list);
  };
  fetchGroupData();
}, [])

async function getGroupList() {
  // 直接await获取snapshot，逻辑更清晰
  const snapshot = await database().ref(`PI20/0/days`).once('value');
  const data = snapshot.val();
  console.log(data);
  return data;
}

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