Возврат Axios Promise через Vuex - PullRequest
Новая
       12

Возврат Axios Promise через Vuex

0 голосов
/ 08 сентября 2018

все!

Мне нужно получить axios Отклонить обещание в моем компоненте vue с помощью vuex.

У меня есть файл serviceApi.js: 

export default {
  postAddService(service) {
    return axios.post('api/services', service);
  }
}

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

actions: {
    addService(state, service) {
        state.commit('setServiceLoadStatus', 1);

        ServicesAPI.postAddService(service)
            .then( ({data}) => {
                state.commit('setServiceLoadStatus', 2);
            })
            .catch(({response}) => {
                state.commit('setServiceLoadStatus', 2);
                console.log(response.data.message);
                return Promise.reject(response); // <= can't catch this one
            });
    }
}

и в моем компоненте vue: 

methods: {
        addService() {
            this.$store.dispatch('addService', this.service)
                .then(() => {
                    this.forceLeave = true;
                    this.$router.push({name: 'services'});
                    this.$store.dispatch('snackbar/fire', {
                        text: 'New Service has been added',
                        color: 'success'
                    }).then()
                })
                .catch((err) => { // <== This never hapens 
                    this.$store.dispatch('snackbar/fire', {
                        text: err.response.data.message || err.response.data.error,
                        color: 'error'
                    }).then();
                });
}

Когда я использую axios непосредственно в моем компоненте, все работает хорошо. Я получаю сообщения об успехах и ошибках. Но когда я работаю с использованием vuex, я не могу получить сообщение об ошибке в компоненте, однако в vuex action console.log выводит то, что мне нужно. Я всегда получаю только успешные сообщения, даже когда плохие вещи случаются на заднем плане. Как я могу справиться с этой ситуацией, используя vuex?

1 Ответ

0 голосов
/ 10 сентября 2018

Добро пожаловать в stackoverflow. Не следует ожидать чего-либо от действия. После вызова действия. Любой ответ должен быть установлен / сохранен в состоянии с помощью мутаций. Поэтому лучше иметь свойство error в вашем штате. Примерно так должно работать 

actions: {
    async addService(state, service) {
        try {
            state.commit('setServiceLoadStatus', 1);
            const result = await ServicesAPI.postAddService(service);
            state.commit('setServiceLoadStatus', 2);
        } catch (error) {
            state.commit("error", "Could not add service");
            state.commit('setServiceLoadStatus', 2);
            console.log(response.data.message);
        }
    }
}

А в вашем компоненте вы можете просто получить оповещение, которое прослушивает ваш state.error

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

...