javascript - 等待查询实时更新然后返回值 [Vuex ,Firestore]

Question

我正在尝试等待来自 Firestore 实时查询的数据，然后执行其他操作.. 一切都按预期工作，我确实将 firebase 的数据形式作为对象，但是当我尝试从返回的对象中获取属性时，结果为空

Vuex Action

export const getThreadMembers = async ({ commit,dispatch }, payload) => {
      try {
        let members = {}
        const threadMembersRef = await db.collection('members')
                                  .doc(payload.threadId)

        threadMembersRef.onSnapshot(function(doc) {
          Object.assign(members,doc.data())
        })   
        /*
         * I've tried to add some delay before resolve the promise , i've succeeded to have the properties names of member Object
         *await dispatch('delay', 5000);
         */
        return Promise.resolve(members)
      } catch (error) {
        return  Promise.reject(error)
      }
    }
/*
 * this is a function for test purpose only
 */ 
export const delay = ({commit}) => {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

组件文件

      created () {
        this.getThreadMembers({
          threadId: this.threadId
        }).then(members => {
          // Here the Members value is an object
          //{bUNFP8ylLpSvZVdIUyOypQ9WfMB3: truej9R1VgexbZU2yp5q5icnIcIg5xB3: true__proto__: Object}
          console.log(members)
          // When i've tried to get only the key of members Object is always empty !?
          console.log(Object.getOwnPropertyNames(members))
         //[]length: 0__proto__: Array(0)

        })
      }

问题:

为什么 Object.getOwnPropertyNames(members) 在 members 之前执行？

Answer 1

onSnapshot 的工作是异步的，但现在它没有被处理，所以该函数的其余部分将继续执行，而无需等待该 promise 的解决。使用 await 是解决此问题的一种方法。

    const doc = await threadMembersRef.onSnapshot()
    Object.assign(members,doc.data())

此外，您不需要在 threadMembersRef 上使用 await，因为它只是分配一个引用，而不是做任何工作。

const threadMembersRef = db.collection('members')
                              .doc(payload.threadId)