为何Firebase数据库回调函数外的变量无法获取赋值结果？

问题根源 #

Firebase的数据库读取是异步操作：reff.on("child_added")注册的回调函数要等数据从服务器返回后才会执行，但你写的console.log(n1)是同步代码，会在回调触发前就执行，这时候n1还没被赋值，自然返回undefined。

解决方法 #

方法1：用自定义回调函数处理数据 #

把需要使用n1的逻辑封装成独立函数，在Firebase的回调里拿到数据后调用这个函数，把n1传进去：

var reff = firebase.database().ref('login-demi/');

// 定义处理n1的逻辑函数
function useN1(value) {
  console.log(value);
  // 所有需要用到n1的代码都写在这里
}

reff.on("child_added", function(data){
  var newnum = data.val();
  let n1 = newnum.number;
  if (n1 == 4){
    n1 = newnum.age;
  }
  // 数据准备好后，调用处理函数
  useN1(n1);
});

方法2：用Promise + async/await实现类同步写法 #

把Firebase的异步操作包装成Promise，再用async/await等待结果，让代码逻辑更清晰：

// 封装获取n1的异步函数
function fetchN1() {
  return new Promise((resolve) => {
    const reff = firebase.database().ref('login-demi/');
    reff.on("child_added", function(data){
      const newnum = data.val();
      let n1 = newnum.number;
      if (n1 == 4){
        n1 = newnum.age;
      }
      resolve(n1);
    });
  });
}

// 用async函数执行异步操作
async function run() {
  const n1 = await fetchN1();
  console.log(n1);
  // 这里可以继续使用n1完成后续逻辑
}

// 启动执行
run();

注意：如果child_added会触发多次（比如节点下有多个子数据），上面的Promise只会返回第一次触发的数据。如果需要处理所有子节点，可以把数据收集到数组中，再统一处理。

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