在 Vuex 存储中捕获 Axios 异常并将其扔给 Vue.js 方法

Question

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

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

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));
    });
  }
}