Vuex 스토어에서 Axios 예외를 포착하여 Vue.js 메서드에 저장

Vuex 스토어에서 Axios 예외를 포착하여 Vue.js 메서드에 저장

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
    },
}

실제 동작 기능을 비동기식으로 만들어야 한다.

비동기 함수를 사용할 수 있는 능력이 있다면, 그냥 기다리면 된다.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 })
    });
  }
}

그렇지 않으면 a를 돌려주면서 오류를 포착해 본인에게 전가해야 할 것이다.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));
    });
  }
}

참조URL: https://stackoverflow.com/questions/49035157/catch-axios-exception-in-vuex-store-and-throw-it-to-vue-js-method