angular - 等待firebase加载快照

有这两种方法。我有一个在调用this.family之前调用getFamily方法的类，因为onSnapshot尚未完成加载。我该如何重组它，以便对getFamily的调用将等待onsnapshot完成？可以使用 promise 吗？

getFamily() {
    return this.family;
}

setFamilyID(familyID) {
    this.familyID = familyID;

    this.db.collection("families").doc(this.familyID).onSnapshot((familyDoc) => {
        console.log("family updated");

        this.family = familyDoc;
    });
}

最佳答案

即时的

如果需要实时更新，请将onSnapshot包装在Promise中。您需要保留onSnapshot返回值的句柄，以便在组件被破坏时可以分离。另外，请确保只调用一次resolve。

getFamily() {
  return this.family;
}

setFamilyID(familyID) {
  this.familyID = familyID;
  return new Promise((resolve, reject) => {
    var resolveOnce = (doc) => {
      resolveOnce = () => void;
      resolve(doc);
    };
    this.detachFamilyIDWatcher = this.db
      .collection("families").doc(this.familyID)
      .onSnapshot((familyDoc) => {
        console.log("family updated");

        this.family = familyDoc;
        resolveOnce(familyDoc);
      }, reject);
  });
}

就一次

如果只需要加载一次数据，则只需使用get而不是onSnapshot即可。 get返回一个Promise，不需要分离。

getFamily() {
  return this.family;
}

setFamilyID(familyID) {
  this.familyID = familyID;

  return this.db
    .collection("families").doc(this.familyID)
    .get().then((familyDoc) => {
      console.log("family updated");

      this.family = familyDoc;
    });
}