प्रतीक्षा करें जब तक फायरबेस ने लोडिंग डेटा (vue) / 'इंतजार' पूरा नहीं किया है

Question

अपने vue ऐप में, मैं -hook में firebase से कुछ डेटा ला रहा हूं created। मैं चाहता हूं कि लोडिंग के साथ डेटा समाप्त होने के बाद कोड को एक्सट्रैन्ड किया जाए। लेकिन मैं इसे काम नहीं कर सकता।

यहाँ मेरा कोड है:

<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>

लेकिन एक कंसोल, पहले 'Done with fetching Data'प्रदर्शित किया जाता है, फिर null(क्योंकि this.settingsअभी भी है null) और उसके बाद ही ओब्जेक्ट settingsमुद्रित होता है। लेकिन मुझे this.settingsवहां nullसाथ काम करने के लिए (और अब नहीं) परिभाषित करने की आवश्यकता है ।

मैंने अब तक क्या कोशिश की:

1. प्रतीक्षारत है
2. एक लोडेड जोड़ना parameter
3. बाद में कोड जोड़ना then()

कुछ भी काम नहीं किया।

Answer 1

onSnapshot()विधि एक अतुल्यकालिक विधि नहीं है। जैसा कि डॉक्टर में बताया गया है, यह " DocumentSnapshotघटनाओं के लिए एक श्रोता देता है "।

यदि आप फायरस्टार दस्तावेज़ के लिए एक निरंतर श्रोता सेट करना चाहते हैं, तो आपको इसका उपयोग करना चाहिए : यदि दस्तावेज़ में कुछ परिवर्तन (जैसे एक फ़ील्ड को एक नया मान मिलता है) तो श्रोता ट्रिगर हो जाएगा। ध्यान दें कि "आपके द्वारा प्रदान की गई कॉलबैक का उपयोग करके एक प्रारंभिक कॉल एकल दस्तावेज़ की वर्तमान सामग्री के साथ तुरंत एक दस्तावेज़ स्नैपशॉट बनाता है" ( डॉक्स देखें )।

आपको फायरस्टार दस्तावेज़ डेटा केवल कॉलबैक फ़ंक्शन में मिलता है जिसे आप onSnapshot()निम्न प्रकार से पास करते हैं:

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

जैसा कि नीलेश पटेल ने उल्लेख किया है कि इस कॉलबैक में उपयोग करने के लिए आपको एक तीर फ़ंक्शन का उपयोग करने की आवश्यकता हैthis । यह भी ध्यान दें कि createdफ़ंक्शन को async होने की आवश्यकता नहीं है ।

अंत में, ध्यान दें कि onSnapshot()जब आप Vue.js घटक को नष्ट करते हैं, तो उसके द्वारा दिए गए सदस्यता समाप्त फ़ंक्शन को कॉल करना एक अच्छा अभ्यास है । beforeDestroyहुक का उपयोग इस प्रकार करें:

// ...
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();
  }
},

---

दूसरी ओर, यदि आप अभी बनाए गए Vue.js हुक में केवल दस्तावेज़ डेटा को पढ़ना चाहते हैं, तो आपको get()विधि का उपयोग करना चाहिए , इस प्रकार है:

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

ध्यान दें, इस मामले में, createdफ़ंक्शन की आवश्यकता है async, क्योंकि get()अतुल्यकालिक है।

---

के बीच अंतर पर अधिक जानकारी get()और onSnapshot()इस में तो जवाब ।

Answer 2

एरो फंक्शन का उपयोग करके देखें

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