javascript - 尽管有外部声明，但 Firebase 数据库中的变量在全局范围内看不到。 (javascript)

Question

过去几个小时我一直在研究局部和全局变量。我从这个问题“How do I change the value of a global variable inside of a function”和其他一些问题中发现，如果变量是在函数之前(在函数之外)声明的，那么当您想更新函数中的变量时，您只需说“变量=空白” “没有“var”继续它。

如果你看看下面的函数，我有三个警报，所有警报都通过 firebase 警报当前登录用户的用户名。 firebase 引用中的第一个警报显示用户名没有问题。另外两个警报“未定义”。我需要能够在所有三个位置引用该变量，我做错了什么吗？还是有另一种方法可以做到这一点，并且可能更有效？

var database = firebase.database();
var username;

function initApp() {
  // Listen for auth state changes.
  // [START authstatelistener]
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      // User is signed in.
      var displayName = user.displayName;
      var email = user.email;
      var emailVerified = user.emailVerified;
      var photoURL = user.photoURL;
      var isAnonymous = user.isAnonymous;
      var uid = user.uid;
      var providerData = user.providerData;

      var ref = firebase.database().ref("users/" + uid);
      ref.once("value").then(function(snapshot) {
        username = snapshot.child("username").val();
        alert(username);
      });
      alert(username);
    }
  });
}
alert(username);

window.onload = function() {
  initApp();
};

我知道这可能看起来与其他问题相似，但尽管有许多不同的方法，但这些答案似乎不起作用。预先感谢您的所有帮助，我希望这只是一个愚蠢的错误。

Answer 1

我认为您对代码的异步性质感到困惑。您的用户名仅在此处的回调中可用:

ref.once("value").then(function(snapshot) {
  username = snapshot.child("username").val();
  alert(username);
});

因为 ref.once("value") 是异步的(紧随上述代码块的 alert 将始终在您的 .then 之前调用 回调执行)。任何依赖于用户名的代码都必须确保异步调用在执行之前完成。

有多种方法可以实现此目的，例如:async/await、从 initApp 函数返回 Promise，或者更改 initApp 以接受回调，该回调在异步内容完成后运行您的依赖代码。下面是一个返回 Promise 的示例:

function initApp() {
  return new Promise(function(resolve, reject) {
    // Listen for auth state changes.
    // [START authstatelistener]
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // User is signed in.
        var displayName = user.displayName;
        var email = user.email;
        var emailVerified = user.emailVerified;
        var photoURL = user.photoURL;
        var isAnonymous = user.isAnonymous;
        var uid = user.uid;
        var providerData = user.providerData;

        var ref = firebase.database().ref("users/" + uid);
        ref.once("value").then(function(snapshot) {
          username = snapshot.child("username").val();
          resolve(username);
        });
      } else {
        // no username, reject
        reject("User is not logged in")
      }
    });
  });
}

window.onload = function() {
  initApp().then(function(username) {
    alert(username);
    // do things that depend on user/username
  }).catch(function(error) {
    alert(error);
  });
};

一旦 Promise 到位，您就可以使用 async/await让你的代码感觉更加同步:

window.onload = async function() {
  try {
    const username = await initApp();
    alert(username);
  } catch(e) {
    alert(e);
  }
};

请记住，您仍然无法在此函数之外提醒用户名 - 任何依赖异步数据的代码必须等待该数据准备好，即在 then/callback/etc 中处理。