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

Posted 2023-02-22

【中文标题】Vue.js：vuex 操作中未捕获的承诺

【英文标题】：Vue.js: Uncaught promises in vuex actions

【发布时间】：2018-12-16 12:45:00

【问题描述】：

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

在 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);
    ,
;

然后我会使用 错误组件 观察错误状态并显示是否有错误。因此，在我的操作或分派该操作的组件中确实无需捕获任何错误。但是我不禁担心它是否是糟糕的设计导致未捕获异常？如果我通过这种设计处理错误，我会遇到什么问题？有什么更好的方法可以做到这一点？

【参考方案1】：

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

例如：

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

【讨论】：

如果axios.get 已经返回了一个promise，为什么还要包装一个新的promise？只需返回那个承诺。

@AdamReis 这绝对是一个有效的评论，我现在已经更改了示例代码，谢谢！

【参考方案2】：

改进了上述示例以避免多余的 promise 包装并使用 async/await 来简化代码：

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