如何将 Javascript Promise Chaining 与 Firebase 身份验证和 Firebase 结合使用？答案

【问题标题】：How do I use Javascript Promise Chaining with Firebase Authentication and Firebase?如何将 Javascript Promise Chaining 与 Firebase 身份验证和 Firebase 结合使用？
【发布时间】：2018-08-27 11:48:47
【问题描述】：

我需要使用用户的 firebase 用户 ID 来使用存储在我的 firebase 中的密钥。

我的函数的步骤如下：

1) 认证后获取 Firebase 用户 ID

2) 使用 Firebase 用户 ID，提取存储的 API 密钥值（我保存在节点中：app/{Firebase 用户 ID}）

3) 使用存储的 API Key 值，运行我的最后一个函数

在做了一些研究之后，我得出的结论是我应该在下面的代码中使用 Javascript Promise Chaining，我很难做到这一点

firebase.initializeApp({databaseURL: "{}"});
var dbRef = firebase.database();

function pull_api_key_from_firebase_after_auth(func){
  firebase.auth().onAuthStateChanged((user) => {
  if (user) {
     var app_ref = dbRef.ref('app').child(user.uid);
     app_ref.on("child_added", function(snap) {
        dictionary_object = snap.val()
        api_key = dictionary_object.api_key
        func(api_key)
      })
    }
  });
}

function final_function(api_key){
   console.log('processing final function')
}

pull_api_key_from_firebase_after_auth(final_function)

或者，我想将 api_key 设为全局变量：

function pull_api_key_from_firebase_after_auth(func){
      firebase.auth().onAuthStateChanged((user) => {
      if (user) {
         var app_ref = dbRef.ref('app').child(user.uid);
         app_ref.on("child_added", function(snap) {
            dictionary_object = snap.val()
            api_key = dictionary_object.api_key
            localStorage.setItem('api_key',api_key)

          })
        }
      });
    }

api_key = localStorage.getItem('api_key')
final_function(api_key)

但是我不知道如何让 final_function 以及我的其他函数等到 api_key 被定义

【问题讨论】：

是 onAuthStateChanged 可能会被多次调用（看到它是 change 事件，看起来确实很可能） - 如果是这样，Promise 可能不适合你
它可能会被多次调用。我假设根据您的评论，我应该只在某些东西将被调用一次时使用承诺。如果我将“用户”设为全局变量/对象，然后让我的其余函数等待 pull_api_key_from_firebase_after_auth 以便我的其余函数可以使用用户变量，怎么样？
promises 只能解决/拒绝一次 - 我并不是说 promises 绝对不可用，对于您显示的代码，我看不到任何好处

标签： javascript firebase asynchronous promise firebase-authentication

【解决方案1】：

您必须使用firebase.auth().onAuthStateChanged 获取uid bcs .auth.currentUser.uid 在页面加载时将不可用。它会在一微秒后显示（它是异步的）。

要做你想做的事情，只需构建一个 promise 函数并在 .onAuthStateChanged 和 .then 中调用它来执行你的其他函数。您的自定义承诺可能如下所示：

function fetchUserData(){
    return new Promise(function(resolve, reject){
        var db = firebase.firestore(); // OR realtime db
        db.collection("users").get().then(function(snap) {
            resolve (snap);
        }).catch(function(error) {
            reject (error);
        });
    }); 
}

在.onAuthStateChange 内执行如下操作：

fetchUserData().then((snap) => {
    // do your thing

})
.catch((error) => {
    console.log(error);
});

【讨论】：