在Vuex存储中捕获Axios异常并将其抛出到Vue.js方法

Question

如何在vuex存储中捕获axios异常并将其抛给vue.js方法？我的目标是让这个例外能够使用input重置绑定到this.$forceUpdate()的计算值。

在我的方法中，我有这个：

methods: {
    mymet: _.debounce(
        function(table, id, key, event) {
            const value = event.target.value;
            this.$store.dispatch('UPDATE_TRANSACTIONS_ITEM', { table, id, key, value }).then(response => {
                event.target.classList.remove("is-invalid")
                event.target.classList.add("is-valid")
            }, error => {
                console.error("Got nothing from server. Prompt user to check internet connection and try again")
                this.$forceUpdate();
            })
        }, 500
    )
}

在我的vuex商店，我有这个：

const actions = {
    UPDATE_TRANSACTIONS_ITEM ({ commit }, data) {
        let company = {
            [data.key]: data.value
        }
        axios.put(`/api/companies/${data.id}`, { company }).then( function ( response ) {
            commit('SET_TRANSACTIONS_ITEM_UPDATE', { profile: data })
        }).catch(function (error) {
            throw error
        })
    }
}

const mutations = {
    SET_TRANSACTIONS_ITEM_UPDATE (state, { profile }) {
        state.company_data[profile.key] = profile.value
    },
}

Answer 1

您需要使实际的动作函数异步。

如果你有能力使用async functions，你可以等待axios调用，让错误冒出来（不需要在动作本身中抛出任何东西）：

const actions = {
  async UPDATE_TRANSACTIONS_ITEM ({ commit }, data) {
    let company = {[data.key]: data.value};
    await axios.put(`/api/companies/${data.id}`, { company }).then(() => {
      commit('SET_TRANSACTIONS_ITEM_UPDATE', { profile: data })
    });
  }
}

否则，你需要返回一个Promise并捕获错误并将其传递给reject处理程序：

const actions = {
  UPDATE_TRANSACTIONS_ITEM ({ commit }, data) {
    return new Promise((resolve, reject) => {
      let company = {[data.key]: data.value};
      axios.put(`/api/companies/${data.id}`, { company }).then(() => {
        commit('SET_TRANSACTIONS_ITEM_UPDATE', { profile: data });
        resolve();
      }, (error) => reject(error));
    });
  }
}