Develop Reference

Wait until firebase has finished loading data (vue) / 'await' not working

In my vue app, I am fetching some data from firebase in the created-hook.
I want the code afterwards to be exectuted after the data was finished with loading. But I can not make it work.
Here is my code:
<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>
But one the console, first 'Done with fetching Data' is displayed, then null (because this.settings is still null) and only after that the Objekt settings is printed.
But I need this.settings to be defined there (and not null anymore) to work with there.
What I tried so far:
Putting in awaits
Adding a loaded parameter
Adding the code afterwards in a then()
Nothing worked.

The onSnapshot() method is not an asynchronous method. As explained in the doc, it "attaches a listener for DocumentSnapshot events".
So, you should use it if you want to set a continuous listener to the Firestore document: if something changes in the document (e.g. a field gets a new value) the listener will be triggered. Note that "an initial call using the callback you provide creates a document snapshot immediately with the current contents of the single document" (see the doc).
You get the Firestore document data only in the callback function that you pass to onSnapshot(), as follows:
created() {
institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
this.settings = doc.data();
console.log(this.settings);
});
}
As Nilesh Patel mentioned, note that you need to use an arrow function in order to use this in this callback. Also note that the created function does NOT need to be async.
Finally, note that it is a good practice to call the unsubscribe function returned by onSnapshot() when you destroy the Vue.js component. Use the beforeDestroy hook as follows:
// ...
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();
}
},
On the other hand, if you just want to read the document data ONLY ONCE in the created Vue.js hook, you should use the get() method, as follows:
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!");
}
}
Note that, in this case, the created function NEEDS to be async, since get() is asynchronous.
More details on the difference between get() and onSnapshot() in this SO answer.

try using arrow function
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)
},

Vue updates data without waiting for state file to update it

When the page is being loaded for the first time, vue component is not waiting for my custom store file to process it. I thought it might fix it with promises but I am not sure on how to do so on functions that do not really require extra processing time.
I am not including the entire .vue file because I know it surely works just fine. My store includes couple of functions and it is worth mentioning it is not set up using vuex but works very similarly. Since I also tested what causes the issue, I am only adding the function that is related and used in MainComp.
Vue component
import store from "./store";
export default {
name: "MainComp",
data() {
return {
isLoading: true,
storageSetup: store.storage.setupStorage,
cards: Array,
};
},
created() {
this.storageSetup().then(() => {
this.cards= store.state.cards;
});
this.displayData();
},
methods: {
displayData() {
this.isLoading = false;
},
}
My custom store.js file
const STORAGE = chrome.storage.sync;
const state = {
cards: []
};
const storage = {
async setupStorage() {
await STORAGE.get(['cards'], function (data) {
if (Object.keys(data).length === 0) {
storage.addToStorage('ALL');
// else case is the one does not work as required
} else {
data.cards.forEach((elem) => {
// modifies the element locally and then appends it to state.cards
actions.addCard(elem);
});
}
});
}
};
export default {
state,
storage
};
Lastly, please ignore the case in setupStorage() when the length of data is equal to 0. If there is nothing in Chrome's local space, then a cards is added properly(state.cards is an empty array every time the page loads). The problem of displaying the data only occurs when there are existing elements in the browser's storage.
How can I prevent vue from assuming cards is not an empty array but instead wait until the the data gets fetched and loaded to state.cards (i.e cards in MainComp)?
Sorry if the problem can be easily solved but I just lost hope of doing it myself. If any more information needs to be provided, please let me know.

Your main issue is that chrome.storage.sync.get is an asynchronous method but it does not return a promise which makes waiting on it difficult.
Try something like the following
const storage = {
setupStorage() {
return new Promise(resolve => { // return a promise
STORAGE.get(["cards"], data => {
if (Object.keys(data).length === 0) {
this.addToStorage("All")
} else {
data.cards.forEach(elem => {
actions.addCard(elem)
})
}
resolve() // resolve the promise so consumers know it's done
})
})
}
}
and in your component...
export default {
name: "MainComp",
data: () => ({
isLoading: true,
cards: [], // initialise as an array, not the Array constructor
}),
async created() {
await store.storage.setupStorage() // wait for the "get" to complete
this.cards = store.state.cards
this.isLoading = false
},
// ...
}

return data from axios without it being a promise

I made a fake api call to my json file with axios. I get a promise back from the function where i can get my data from. but i don't want that. I want to receive the data from the function.
my code now: products.js
export default {
getAllProducts(axios) {
return axios.get('fakedb.json').then(response => {
return response.data;
});
}
}
the view file: a product.vue file
import productController from '~/data/controllers/product';
export default {
data() {
return {
products: productController.getAllProducts(this.$axios).then(res => this.products = res)
}
},
}
but this is not what i want to achieve.
what i want to achieve is this code in my product.vue file:
import productController from '~/data/controllers/product';
export default {
data() {
return {
products: productController.getAllProducts(this.$axios)
}
},
}
i want to receive the data without having to handle the promise in the view file. any solution how to return my data in the products.js file?
if i do a normal return from the products.js file like this it works fine:
export default {
getAllProducts(axios) {
return [
{
"name": "Product1",
"price": 9.75
},
{
"name": "Product2",
"price": 10.75
}
]
}
}
But i want it to go with axios

Since you have a .vue-file, I assume that this is a single-page vue component, right? And therefore you use vue-cli or webpack. I therefore assume that you can use async/await syntax.
Retrieving data from axios is asynchronous, because you basically cannot know how long it takes for it to retrieve the data over the network. And this kind of situation is what async/await is for.
So make the functions async:
products.js
export default {
async getAllProducts(axios) {
const response = await axios.get('fakedb.json');
return response.data;
}
}
product.vue:
import productController from '~/data/controllers/product';
export default {
data() {
return {
products: [],
};
},
async mounted: {
this.products = await productController.getAllProducts(this.$axios);
}
}
I do not think you can make the data function asynchronous, so return an empty data object (I have assumed that it is an array), and then use the mounted hook to retrieve data.

You can't. A function returns immediately and there is nothing meaningful for it to return if you don't want a promise, since loading won't have begun yet. This is the problem that promises solve to begin with. It's a bad pattern to make an async call into your data to begin with, though. Use this pattern instead:
data() {
return {
products: null
}
},
methods: {
getAllProducts() {
return axios.get('fakedb.json').then(response => {
this.products = response.data;
});
}
},
created() {
this.getAllProducts();
}
The async call is abstracted out into the created hook, and when it's resolved it will set the data accordingly.
Here's a little demo

Correct syntax for importing axios method in Vue js

I am trying to separate my axios calls from my main vue instance by importing them instead of calling them directly in the created hook.
I have this in a separate file called data.js
import axios from 'axios'
export default{
myData() {
return axios.get(`http://localhost:8080/data.json`)
.then(response => {
// JSON responses are automatically parsed.
return response.data;
})
.catch(e => {
return this.myErrors.push(e)
});
},
And in my vue instance I have the following:
import myDataApi from '#/api/data.js'
export default {
name: 'app',
components: {
myDataApi, // not sure if this is correct
},
data: function () {
return {
myInfo: '',
}
},
created() {
this.myInfo = myDataApi.myData();
console.log('this.myInfo= ', this.myInfo)
},
I am trying to populate myInfo with the json called by myData. This returns [object Promise] in Vue devtools and the as Promise {<pending>} in the console.
All the data I need is inside that Promise {<pending>} in an array called [[PromiseValue]]:Object so I know it is working, I just need to know the correct way implementing this.

I don't have a development environment enabled to test this at the moment, but I do notice that you are trying to assign a variable the moment that the component is initialized. This object is a promise, but you're not handling the promise after it is resolved inside the component where you have imported it.
I would recommend trying to handle the promise inside of the actual component, something like:
import myDataApi from '#/api/data.js'
export default {
name: 'app',
components: {
myDataApi, // not sure if this is correct
},
data: function () {
return {
myInfo: '',
}
},
created() {
myDataApi.myData()
.then((data) => {
this.myInfo = data
console.log('this.myInfo= ', this.myInfo);
});
.catch((e) => handleError) // however you want to handle it
},

Just to add to #LexJacobs answer. I omitted the parenthesis around data in .then() as seen below. Vue was squawking about data not being available even though it was. This solved that problem, although to be honest I don't know why.
myDataApi.myData()
.then(data => {
this.dataHasLoaded = true;
this.myInfo = data;
})
.catch(e => {
this.myErrors.push(e)
});

Vue: axios executing synchronously instead of asynchronously on multiple components

I am trying to load ajax data when my component is created, however, this seems to make other items that also load via ajax within created() load synchronously instead of asynchronously when the following is executed, this ajax request takes about 2 seconds to run causing everything after to load in a synchronous style.
The following component takes about 2 seconds to load from the ajax call:
component1.vue
export default {
data: () => {
return { balance: { chips: 0, coins: 0, rewards: 0 } }
},
async created() {
this.balance = (await axios.get('/api/player/balance')).data
}
}
This component takes less then a second to load from the ajax call:
component2.vue
export default {
data: () => {
return { items: [] }
},
async created() {
this.items = (await axios.get('/api/items')).data
}
}
The two should load asyncronusly, however they do not, /api/player/balance runs, then /api/items runs.
I have also tried using .then() like this as well:
export default {
data: () => {
return { balance: { chips: 0, coins: 0, rewards: 0 } }
},
created() {
axios.get('/api/player/balance').then(function (response) {
this.balance = response.data
})
}
}
When I wrap this.balance = ... in a setTimeout, then the other items load fine.
Is there a better way to implement this so ajax request to run synchronously?
Edit
Using fetch solves the issue of request loading synchronously and allows them to load asynchronously.
export default {
data: () => {
return { balance: { chips: 0, coins: 0, rewards: 0 } }
},
async created() {
let response = await fetch('/api/player/balance')
this.balance = await response.json()
}
}
Is there a way to do this with axios?

Have you tried without await? The await expression causes async function execution to pause until a Promise is fulfilled, that is causing your other items to hang until the ajax call is complete
EDIT
Can you try this with your other attempt?
axios.get('/api/player/balance').then((response) => {
this.balance = response.data
});
The callback function you used in the then part uses ES5 notation where the keyword this will be scoped to that method only. moving into a ES6 notation will do. Or you can hold this into a new variable and work accordingly with that like this
const self = this;
axios.get('/api/player/balance').then(function(response) {
self.balance = response.data
});
Although, the best practice (to me) is to update model in mounted() other than created()