在 ionic 3 中从 firebase 获取数据后调用 then 函数

Question

我想从 firebase 获取数据，然后我想执行另一个函数。第二个函数必须等到第一个函数完成。

this.oAngularFireDatabase.database.ref('Users').orderByKey()
            .on('value', snapshot => {
              if (snapshot.hasChildren()) {
                snapshot.forEach(innerSnap => {
                  if (innerSnap.hasChild(user.uid)) {
                    //User role key
                    this.loggedInUserUserRoleKey = innerSnap.key;
                    //User id
                    this.loggedInUserId = user.uid;

                    //User name
                    this.loggedInUserName = innerSnap.child(user.uid).child("user_name").val();

                    if (innerSnap.child(user.uid).hasChild("user_image")) {
                      //User Image
                      this.loggedInUserImage = innerSnap.child(user.uid).child("user_image").val();
                    }
                    return false;
                  }
                })
              }
            })

我无法在 on 之后调用 then 函数，它给我一个错误。在我上面的代码中，我想在从 firebase 获取所有数据后调用另一个函数。

Answer 1

Firebase on() 方法可以触发多次：在最初加载数据时触发一次，在数据更改时触发一次。由于承诺（您调用 then() 的东西）只能解决一次，因此 on() 不能 return 承诺。

这里有两个选项：

您只想加载一次数据。

如果是这种情况，您应该使用 Firebase 的 once() 方法，该方法执行 return 承诺。

this.oAngularFireDatabase.database.ref('Users').orderByKey()
    .once('value').then(snapshot => {
      if (snapshot.hasChildren()) {
        snapshot.forEach(innerSnap => {
          if (innerSnap.hasChild(user.uid)) {
            //User role key
            this.loggedInUserUserRoleKey = innerSnap.key;
            //User id
            this.loggedInUserId = user.uid;

            //User name
            this.loggedInUserName = innerSnap.child(user.uid).child("user_name").val();

            if (innerSnap.child(user.uid).hasChild("user_image")) {
              //User Image
              this.loggedInUserImage = innerSnap.child(user.uid).child("user_image").val();
            }
            return false;
          }
        })
      }
    }).then(value => {
        // TODO: perform subsequent action on boolean value
    })

您也想监听数据的变化。

如果是这种情况，你应该将你想采取的后续行动放入on()回调：

this.oAngularFireDatabase.database.ref('Users').orderByKey()
    .on('value', snapshot => {
      if (snapshot.hasChildren()) {
        snapshot.forEach(innerSnap => {
          if (innerSnap.hasChild(user.uid)) {
            //User role key
            this.loggedInUserUserRoleKey = innerSnap.key;
            //User id
            this.loggedInUserId = user.uid;

            //User name
            this.loggedInUserName = innerSnap.child(user.uid).child("user_name").val();

            if (innerSnap.child(user.uid).hasChild("user_image")) {
              //User Image
              this.loggedInUserImage = innerSnap.child(user.uid).child("user_image").val();
            }
          }
        })
        // TODO: perform subsequent action on data
      }
    })

请注意，这两个操作对于他们试图完成的事情来说看起来都非常昂贵：扫描 JSON 树以获取特定值是 Firebase 中的一种反模式，通常意味着您应该 modify/augment 您的 JSON 以允许直接查找或查询。

例如，我怀疑您现在的结构类似于 /Users/$randomkey/$uid: { ..user data... }。为了获得更好的性能，请考虑将用户数据直接存储在他们的 UID 下：/Users/$uid: { ..user data... }。这消除了查询的需要，并允许您直接从 this.oAngularFireDatabase.database.ref('Users').child(user.uid).

加载用户数据

在 ionic 3 中从 firebase 获取数据后调用 then 函数

Calling then function after fetching data from firebase in ionic 3

javascript

firebase

ionic-framework

firebase-realtime-database

angularfire2