将 axios 响应错误存储在 axios store 中并在组件内处理它是一种好习惯吗？

Posted 2023-02-22

【中文标题】将 axios 响应错误存储在 axios store 中并在组件内处理它是一种好习惯吗？

【英文标题】：Is it good practice to store the axios response error in axios store and handle it within the component?

【发布时间】：2021-03-05 03:52:03

【问题描述】：

我计划通过 axios 通过 vuex 执行所有服务器 CRUDing 传输。喜欢：

actions:  // dispatch
    createCategory(ctx) 
        return axios.post(process.env.API_URL + "category/create/", category)
            .then(response => 
                ctx.commit('UPDATE_CATEGORY', response.data.updated_category);
                return response;
            ).catch(error => 
                return error;
            )
...

然后在像这样的组件中调用它们

this.$store.dispatch("createCategory", category)
    .then(response =>  DO NOTIFICATION STUFF   
    .catch(error =>  this.errors = error 

（我可能需要 axios 中的 promise 和 reject() 来捕获错误，但这不是重点）

我的问题是我应该在本地以这种方式（组件）处理错误，还是应该使用类似 vuex 的状态全局处理它

actions:  // dispatch
    createCategory(ctx) 
        return axios.post(process.env.API_URL + "category/create/", category)
            .then(response => 
                ctx.commit('UPDATE_CATEGORY', response.data.updated_category);
                return response;
            ).catch(error => 
                ctx.commit('SET_ERROR', error)
            )
...

并在组件中调用错误，例如：this.$store.getters['getErrors']?

（这里的例子有点抽象，只是为了解释）

那么，在组件内本地处理错误还是在 vuex 商店内全局处理错误，哪种方式更好？

【参考方案1】：

除非您打算与多个不同的组件共享错误状态，否则我会在组件内本地处理错误。

如果不需要，我通常会避免使用 Vuex，因为它会增加很多开销。我使用 Vuex 的经验法则是：

仅当状态将被多个不相关的组件访问时才使用 Vuex 仅当状态由不是相关父组件的直接子组件的组件访问时才使用 Vuex

看看这个"Should I store this data in Vuex" decision tree

要考虑的另一件事是您使用Vuex 做什么，它是组件 状态管理，还是数据 状态管理。

如果你把 Vuex 当作一个数据状态管理（特定数据的状态并且可以被任何组件访问），那么在组件内本地处理错误更有意义。

如果您将 Vuex 视为组件状态管理（特定组件/页面的状态并且不会被其他组件访问），那么全局/在商店中处理它是有意义的，因为所有状态都特定于那个特定组件，但我个人仍会在本地处理它，除非我需要将状态共享给非直接子组件。我经常看到这被应用在some vue app

除此之外，我还更喜欢在本地处理错误时的代码外观：

try 
    store.doSomething();
catch (err) 
    console.log("Failed to execute doSomething()");

看起来比：

store.doSomething();

if (store.err) 
    console.log("Failed to execute doSomething()");