在 Vuex store 中捕获 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 })
    });
  }
}

否则，您需要 return 一个 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));
    });
  }
}

在 Vuex store 中捕获 Axios 异常并抛给 Vue.js 方法

Catch Axios exception in Vuex store and throw it to Vue.js method

vue.js

axios

vuex