Как перехватить результат axios-запроса из Vuex в компоненте?

Есть функция в Vuex, которая сохраняет данные:
store()
async store({commit}, formData) {
        return axios({
            url: '/api/review/store',
            method: 'POST',
            data: formData,
            headers: {'Content-Type': 'multipart/form-data' }
        })
        .then(response => {
            let comment = response.data.comment;
            commit('ADD_COMMENT',comment);
        })
        .catch(error => {
            if(error.response.data.hasOwnProperty('error')) commit('ADD_ERROR_MESSAGE',error.response.data.error);
        });
    },

В блоке catch я проверяю наличие свойства в ответе, и добавляю ошибку в state.

В компоненте ReviewForm.vue у меня есть метод, который запускает данный action:
storeReview
this.storeReview(formData)
                .then(res => {
                    this.clearForm();
                    notyf.success({
                        message: 'Спасибо за ваш отзыв',
                        icon: false
                    });  
                })

Но так как я возвращаю в экшене промис, получается блок в очисткой формы и отправкой уведомления срабатывают до catch блока, в результате чего даже в случае ошибки.

Я бы хотел сначала выполнить запрос axios, потом узнать какой ответ пришел, и уже затем в своем компоненте запустить блок then, то есть просто запустить его если все прошло без ошибок. Как это можно сделать в методе конпонента? Или по аналогии с коммитом ошибок сделать коммит сообщений об успешной отправке?
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы