实时

Question

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

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;
    });
}

Answer 1

实时

如果需要实时更新，请将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;
    });
}

Answer 2

尝试类似的方法，让我们看看您是否想成为自己。

Async/await

异步/等待有一种特殊的语法可以在更大范围内处理承诺舒适时尚，称为“异步/等待”。出奇的容易了解和使用。

getFamily() {
  return this.family;
}

async setFamilyID(familyID) {
  this.familyID = familyID;

  await this.family = this.db.collection("families").doc(this.familyID).onSnapshot((familyDoc) => familyDoc);
}

Answer 3

要回答这个问题：

Widget

但是，只有在用户调用此函数后，该文档将由另一个源进行更改时，才应该执行此操作，并且该文档需要等待更改完成后才能返回任何值。

否则，您可能应该使用setFamilyID(familyID) { this.familyID = familyID; return new Promise((resolve, reject) => { const listener = this.db .collection("families") .doc(this.familyID) .onSnapshot(snapshot => { const familyDoc = snapshot.data(); // this close the listener lisener(); this.family = familyDoc; resolve(familyDoc); }, reject); }); }而不是接受的答案中建议的get()。

等待firebase加载快照

3 个答案:

实时

只需一次