So in my brands.js store I have this action which calls the API:
getBrandMerchants({ commit }, id) {
commit('setLoading', true);
BrandService.getBrandMerchants(id)
.then((response) => {
commit('setBrand', formatter.deserialize(response.data.result.brand));
commit('setMerchants', formatter.deserialize(response.data.result.merchants));
commit('setLoading', false);
console.log('First');
})
.catch((error) => {
if (error.response.status === 401) {
dispatch('alert/error', error.response, { root: true });
} else {
Toast.open({
type: 'is-danger', message: error.response.data.meta.message,
});
}
});
},
In my components I have the following snippets:
...mapState('brands', ['merchants']),
...mapActions('brands', ['getBrandMerchants']),
When I try to run this method in my component:
addMerchantsToBrandGroup(index) {
const { id } = this.rows[index].brand;
if (id === null) { return; }
this.getBrandMerchants(id)
.then(() => {
console.log('Second');
this.rows[index].merchants = this.merchants
});
},
console results to
Second
First
How can I make it so console returns First then Second?
First
Second
As mentioned by @deceze:
Adding async and await to:
async getBrandMerchants({ commit }, id) {
commit('setLoading', true);
await BrandService.getBrandMerchants(id)
.then((response) => {
commit('setBrand', formatter.deserialize(response.data.result.brand));
commit('setMerchants', formatter.deserialize(response.data.result.merchants));
commit('setLoading', false);
console.log('First');
})
.catch((error) => {
if (error.response.status === 401) {
dispatch('alert/error', error.response, { root: true });
} else {
Toast.open({
type: 'is-danger', message: error.response.data.meta.message,
});
}
});
},
and
async addMerchantsToBrandGroup(index) {
const { id } = this.rows[index].brand;
if (id === null) { return; }
await this.getBrandMerchants(id)
console.log('Second');
this.rows[index].merchants = this.merchants
},
Solved the problem. Thanks!