Vue.js：vuex动作中未捕获的承诺

Question

我了解vuex动作会返回承诺，但是我没有在vuex中找到处理错误的理想模式。我目前的方法是在axios插件上使用错误拦截器，然后将错误提交给我的vuex存储。

in plugins / axios.js ：

export default function({ $axios, store }) {
    $axios.onError(error => {
        store.dispatch('setError', error.response.data.code);
    });
}

在中 store / index.js ：

export const state = () => ({
    error: null,
});

export const mutations = {
    SET_ERROR(state, payload) {
        state.error = payload;
    },
}

export const actions = {
    setError({ commit }, payload) {
        commit('SET_ERROR', payload);
    },
};

然后，我将使用错误组件来监视错误状态并显示是否存在错误。因此，在我的操作或调度操作的组件中，确实无需捕获任何错误。但是我不禁担心它是否是不良设计而未捕获异常？如果我通过这种设计处理错误，会遇到什么问题？关于任何更好的方法的建议？

Answer 1

我认为您应该在vuex动作中进行API调用，如果失败，则拒绝带有API调用错误的promise。我认为避免列出所有Axios错误，而应在诺言中返回错误时处理该错误，我认为这样维护和调试会更容易

例如：

getCartItems: function ({commit}, url) {
    return axios.get(url).then(response => {
      commit('setCartItems', response.data)
      return response
    }).catch(error => {
      throw error
    })
 },

Answer 2

上面的示例进行了改进，以避免多余的承诺包装，并使用async / await来简化代码：

export const getCartItems = async ({commit}, url) => {
  const response = await axios.get(url);
  commit('setCartItems', response.data)
  return response;
};