Question

全部！

我需要使用vuex在我的vue组件中拒绝axios 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中，hoever会打印我需要的内容。我总是只收到成功的消息，即使坏事不断发生。我如何使用vuex处理这种情况？

Answer 1

欢迎来到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同步调用其他操作。在这种情况下，结果将是一个承诺。

通过Vuex返回axios Promise

1 个答案: