在组件内的vuex动作上承诺then（）

Question

generally I like to keep most of the logic behind vuex actions inside my modules, this way I keep components clean and most of the logic gathered in modules (this seems optimal form me), the issue is sometimes I'll need to do some action inside component data after the action (generally invlving an axios promise) finishes(like for example, clearing a form after a successfull ajax call), I thought I solved this by adding a then closure to my vuex action call and returning axios promise in my module but I noticed that the then closure will always resolve inmediatelly instead of only when everything goes right, 200 OK.

Here is my component :

stripeSourceHandler: function(sourceId)
    {
        if(this.customerSources.length == 0)
        {
            console.log('createSourceAndCustomer');
            this.createSourceAndCustomer({ id: sourceId, paymentCity:this.paymentCity, paymentAddress:this.paymentAddress })
            .then(() => {
                this.clearForm();
            });
        }
}

My vuex module action:

createSourceAndCustomer({ commit }, sourceData)
    {
        commit('Loader/SET_LOADER', { status:1, message: 'Añadiendo forma de pago...' }, { root: true });
        return axios.post('/stripe/create-source-and-customer', sourceData)
        .then((response) => {
            commit('Loader/SET_LOADER', { status:2, message: response.data.message }, { root: true });
            commit('CREATE_SOURCE_AND_CUSTOMER', response.data.customer);
        }, 
        (error) => {
            commit('Loader/SET_LOADER', { status:3, errors: error, message: 'Oops, algo salio mal..' }, { root: true });
        });
    },

So to summarize, I want the clearForm method to happen only if the axios call was successful instead of always firing.

Answer 1

You return the axios post but you also chain from it, If you want to do that then I'd recommend using the async/await pattern to clean the code up and avoid nested promise chaining. Here's a refactored look:

async createSourceAndCustomer({ commit }, sourceData){
  try {
    commit('Loader/SET_LOADER', { status:1, message: 'Añadiendo forma de pago...' }, { root: true });
    const { data : { message } } = await axios.post('/stripe/create-source-and-customer', sourceData)
    commit('Loader/SET_LOADER', { status:2, message }, { root: true });

    return Promise.resolve()

  } catch (err) {
    commit('Loader/SET_LOADER', { status:3, errors: error, message: 'Oops, algo salio mal..' }, { root: true });

    return Promise.reject()
  }           
},

A bit cleaner for you, and it will resolve your issue.

Edit

If you didn't want to use this pattern, then you would instead wrap your code in a new promise, like this:

createSourceAndCustomer({ commit }, sourceData)
    {
      return new Promise ((resolve, reject) => {
        commit('Loader/SET_LOADER', { status:1, message: 'Añadiendo forma de pago...' }, { root: true });
        axios.post('/stripe/create-source-and-customer', sourceData)
        .then((response) => {
            commit('Loader/SET_LOADER', { status:2, message: response.data.message }, { root: true });
            commit('CREATE_SOURCE_AND_CUSTOMER', response.data.customer);
            resolve()
        }, 
        (error) => {
            commit('Loader/SET_LOADER', { status:3, errors: error, message: 'Oops, algo salio mal..' }, { root: true });
            reject()
        });
      })
    },