首页 文章

通过Vuex返回axios Promise

提问于
浏览 次
0

所有！

我需要使用vuex在我的vue组件中获取axise Promise .

我有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处理这种情况？

promise axios vuex

1 回答

  • 0

    欢迎来到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

    回复于

相关问题