Javascript 等待firebase完成加载数据（vue）/&x27；等待&x27；不起作用

在我的vue应用程序中，我正在创建的

钩子中从firebase获取一些数据。
我希望在数据加载完成后执行代码。但是我不能让它工作

这是我的密码：

<template>
    <div>
        <h1>Test 2</h1>
    </div>
</template>

<script>
import { institutesCollection } from '../firebase';
export default {
    name: 'Test2',
    data() {
        return {
            settings: null,
        }
    },
    async created() {
        await institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(
            await function(doc) {
                this.settings = doc.data();
                console.log(this.settings);
            }
        )
        console.log('Done with fetching Data');
        console.log(this.settings)
    },
    methods: {
        
    }
}
</script>


测试2
从“../firebase”导入{InstituteCollection}；
导出默认值{
名称：“Test2”，
数据（）{
返回{
设置：空，
}
},
异步创建（）{
等待InstituteCollection.doc（'FbdYJ5FzQ0QVcQEk1KOU'）。onSnapshot(
等待功能（doc）{
this.settings=doc.data（）；
console.log（this.settings）；
}
)
log（'Done with fetching Data'）；
console.log（this.settings）
},
方法：{
}
}

但在控制台中，首先显示
“完成数据提取”
，然后显示
null
（因为
此.settings
仍然是
null
），然后才打印对象
settings
。
但是我需要在那里定义
this.settings
（不再是
null
），以便在那里使用

到目前为止，我尝试的是：

投入等待
添加加载的
参数
在
then（）中随后添加代码

没有工作。
尝试使用箭头功能

  async created() {
        await institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(
            doc => {
                this.settings = doc.data();
                console.log(this.settings);
            }
        )
        console.log('Done with fetching Data');
        console.log(this.settings)
  },

该方法不是异步方法。如文档中所述，它“为
DocumentSnapshot
事件附加一个侦听器”

因此，如果您想为Firestore文档设置一个连续侦听器，则应该使用它：如果文档中发生了某些更改（例如，某个字段获得了一个新值），将触发侦听器。请注意，“使用您提供的回调进行初始调用时，会立即使用单个文档的当前内容创建文档快照”（请参阅）

您只能在传递给
onSnapshot（）
的回调函数中获取Firestore文档数据，如下所示：

created() {
    institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
           this.settings = doc.data();
           console.log(this.settings);
      });
}

// ...
data() {
    return {
        settings: null,
        firestoreListener: null
    }
},
created() {
    this.firestoreListener  = institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
           this.settings = doc.data();
           console.log(this.settings);
      });
},
beforeDestroy() {
  if (this.firestoreListener) {
    this.firestoreListener();
  }
},

async created() {
    const doc = await institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').get();
    if (doc.exists) {
             this.settings = doc.data();
    } else {
             // doc.data() will be undefined in this case
             console.log("No such document!");
    }
}

正如Nilesh Patel提到的，请注意。还要注意，创建的
函数不需要是异步的

最后，请注意，销毁Vue.js组件时，调用由
onSnapshot（）
返回的unsubscribe函数是一种很好的做法。在销毁之前使用
钩子，如下所示：

created() {
    institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
           this.settings = doc.data();
           console.log(this.settings);
      });
}

// ...
data() {
    return {
        settings: null,
        firestoreListener: null
    }
},
created() {
    this.firestoreListener  = institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
           this.settings = doc.data();
           console.log(this.settings);
      });
},
beforeDestroy() {
  if (this.firestoreListener) {
    this.firestoreListener();
  }
},

async created() {
    const doc = await institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').get();
    if (doc.exists) {
             this.settings = doc.data();
    } else {
             // doc.data() will be undefined in this case
             console.log("No such document!");
    }
}


另一方面，如果只想在创建的Vue.js钩子中读取文档数据一次，则应使用如下方法：

created() {
    institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
           this.settings = doc.data();
           console.log(this.settings);
      });
}

// ...
data() {
    return {
        settings: null,
        firestoreListener: null
    }
},
created() {
    this.firestoreListener  = institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
           this.settings = doc.data();
           console.log(this.settings);
      });
},
beforeDestroy() {
  if (this.firestoreListener) {
    this.firestoreListener();
  }
},

async created() {
    const doc = await institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').get();
    if (doc.exists) {
             this.settings = doc.data();
    } else {
             // doc.data() will be undefined in this case
             console.log("No such document!");
    }
}

注意，在这种情况下，创建的
函数需要
异步，因为
get（）
是异步的


更多关于
get（）
和
onSnapshot（）
之间区别的详细信息。
我不知道！谢谢，这解决了我的问题