Promise then () для действия vuex внутри компонента

Question

Как правило, мне нравится хранить большую часть логики действий vuex внутри моих модулей, таким образом я сохраняю компоненты чистыми, а большую часть логики собираем в модули (мне кажется, это оптимально для меня), иногда возникает проблемавыполнить какое-то действие внутри данных компонента после того, как действие (обычно включающее обещание axios) завершится (как, например, очистка формы после успешного вызова ajax), я решил, что решил эту проблему, добавив замыкание затем к моему вызову действия vuex и вернув аксиособещание в моем модуле, но я заметил, что тогда закрытие всегда разрешается сразу, а не только тогда, когда все идет хорошо, 200 ОК.

Вот мой компонент:

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

Мое действие модуля vuex:

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 });
        });
    },

Итак, подведем итог: я хочу, чтобы метод clearForm происходил только в том случае, если вызов axios был успешным, а не всегда срабатывал.

Answer 1

Вы возвращаете сообщение axios, но вы также получаете цепочку из него. Если вы хотите сделать это, я бы рекомендовал использовать шаблон async/await, чтобы очистить код и избежать цепочки вложенных обещаний.Вот измененный вид:

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()
  }           
},

Немного чище для вас, и он решит вашу проблему.

Редактировать

Если вы этого не сделалиЕсли вы не хотите использовать этот шаблон, то вместо этого вы должны обернуть свой код в новое обещание, например:

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()
        });
      })
    },