Así que en mi tienda Brands.js tengo esta acción que llama a la 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, }); } }); },En mis componentes tengo los siguientes fragmentos:
...mapState('brands', ['merchants']), ...mapActions('brands', ['getBrandMerchants']),Cuando intento ejecutar este método en mi componente:
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 }); },resultados de la consola a
Second First¿Cómo puedo hacer que la consola devuelva primero y luego segundo?
First SecondComo lo menciona @deceze:
Agregando async y await para:
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, }); } }); },y
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 },Resuelve el problema. ¡Gracias!