Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
181
rated 0 times [  184] [ 3]  / answers: 1 / hits: 54170  / 5 Years ago, tue, april 16, 2019, 12:00:00

I am making a loader for some components in my app.



Here is my component:



        mounted() {
this.loading = true;

this.getProduct();
},
methods: {
async getProduct() {
await this.$store.dispatch('product/getProducts', 'bestseller');

console.log(123);

this.loading = false;
}
},


Vuex action:



getProducts({commit}, type) {
axios.get(`/api/products/${type}`)
.then(res => {
let products = res.data;
commit('SET_PRODUCTS', {products, type})
}).catch(err => {
console.log(err);
})
},


The problem is in this line: await this.$store.dispatch('product/getProducts', 'bestseller');



I expect the code will stop at that line and wait for data is loaded from AJAX call and then set the loading is false;



But it isn't. The loading is still set false and the console.log run before my data is ready.



I already tried to move async/await into Vuex action and it worked. However, I didn't get the difference between them.



Below code is worked for me:



Component:



mounted() {
this.loading = true;

this.$store.dispatch('product/getProducts', 'bestseller').then((res) => {
this.loading = false;
});
},


Vuex action:



async getProducts({commit}, type) {
let res = await axios.get(`/api/products/${type}`);

commit('SET_PRODUCTS', {products: res.data, type});
}

More From » vue.js

 Answers
3

Change this:



getProducts({commit}, type) {
axios.get(`/api/products/${type}`)
.then(res => {
let products = res.data;
commit('SET_PRODUCTS', {products, type})
}).catch(err => {
console.log(err);
})
},


To this:



getProducts({commit}, type) {
return axios.get(`/api/products/${type}`)
.then(res => {
let products = res.data;
commit('SET_PRODUCTS', {products, type})
}).catch(err => {
console.log(err);
})
},


Should work.



axios.get returns a promise. You would need to return that promise in order to let await wait for it. Otherwise, you are implicitly returning undefined and await undefined would immediately resolve.


[#52237] Wednesday, April 10, 2019, 5 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
maxinec

Total Points: 117
Total Questions: 116
Total Answers: 116

Location: Bangladesh
Member since Sat, Jan 23, 2021
3 Years ago
maxinec questions
;