Vue.js:Nuxt错误处理

Question

苦苦挣扎以使用vuex设置错误处理.似乎有很多方法可以做到这一点,并且很少有关于正确错误处理的文档.我一直在尝试四种替代方案,但我还没有找到令人满意的解决方案.

---

备选方案1 - 捕获和处理组件上的错误

在 pages/login.vue中:

export default {
    methods: {
        onLogin() {
            this.$store.dispatch('auth/login', {
                email: this.email,
                password: this.password,
            }).then(() => {
                this.$router.push('/home');
            }).catch((error) {
                // handle error in component
            });
        },
    },
}

在 store/auth.js中:

export const actions = {
    login({ commit }, { email, password }) {
        return this.$axios.post('/api/login', {
            email,
            password,
        }).then((res) => {
            doSomething(res);
        });
    },
}

PROS

• 嗯.

缺点

• 错误未处理并存储在vuex中.
• 在组件方法中引入了大量的样板代码.

---

备选方案2 - 在vuex中捕获和处理错误

在 pages/login.vue中:

export default {
    methods: {
        onLogin() {
            this.$store.dispatch('auth/login', {
                email: this.email,
                password: this.password,
            }).then(() => {
                this.$router.push('/home');
            });
        },
    },
}

在 store/auth.js中:

export const actions = {
    login({ commit }, { email, password }) {
        return this.$axios.post('/api/login', {
            email,
            password,
        }).then((res) => {
            doSomething(res);
        }).catch((error) => {
            // store error in application state
            commit('SET_ERROR', error);
        });
    },
}

PROS

• 可以从任何组件使用vuex访问错误对象
• 可以在布局中使用反应性错误组件,这在错误状态更改时显示.

缺点

• 我不确定是否有办法跟踪错误的来源,从哪个组件抛出.

---

备选方案3 - 使用axios拦截器捕获错误

在 plugins/axios.js中:

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

在 pages/login.vue中:

export default {
    methods: {
        onLogin() {
            this.$store.dispatch('auth/login', {
                email: this.email,
                password: this.password,
            }).then(() => {
                this.$router.push('/home');
            });
        },
    },
}

在 store/auth.js中:

export const actions = {
    login({ commit }, { email, password }) {
        return this.$axios.post('/api/login', {
            email,
            password,
        }).then((res) => {
            doSomething(res);
        });
    },
}

PROS

• 全局错误处理
• 无需捕获vuex或组件中的错误
• 没有锅炉板代码

缺点

• 所有异常都未处理,意味着未发现非axios错误.

---

备选方案4 - 自定义错误插件

我一直在尝试实现一个捕获所有异常的自定义插件,但我没有成功地使其工作.

在 plugins/catch.js中:

export default (ctx, inject) => {
    const catchPlugin = function (func) {
        return async function (args) {
            try {
                await func(args)
            } catch (e) {
                return console.error(e)
            }
        }
    };
    ctx.$catch = catchPlugin;
    inject('catch', catchPlugin);
}

在 pages/login.vue中:

export default {
    methods: {
        onLogin: this.$catch(async function () {
            await this.$store.dispatch('auth/login', { email: this.email, password: this.password });
            this.$router.push('/home');
        }),
    },
}

PROS

• 没有样板.
• 插件中捕获的所有错误.

缺点

• 我不能让它发挥作用.:(

---

我的印象是在vue/nuxt中缺少有关错误处理的文档.任何人都可以获得第四种工作方式吗？这会是理想的吗？还有其他选择吗？什么是传统的？

感谢您的时间!

Answer 1

选项 #4 不起作用的原因是因为您返回了一个永远不会执行的函数：

function catchPlugin(outerFunction) {
   return function async innerFunction(args) {
     try {
       const data = await outerFunction(args);
       return { data } 
     } catch (error) {
       return { error }
     }
   }
}

用法：

const execute = catchPlugin((args) => {
  // do something
})

execute('myArgument');

如您所见，您还需要执行内部函数，以使您的示例工作：

onLogin: this.$catch(async function () {
    await this.$store.dispatch('auth/login', { email: this.email, password: this.password });
    this.$router.push('/home');
})(), // mind the () :-)

但是...我相信处理组件中的错误并不是一件坏事，因为这与您的视图组件紧密耦合。例如，考虑一个登录组件，我们现在看到的是一个全局错误处理程序 (toastr)，如果用户名/密码不正确，它将显示一条 toast 消息。根据我的经验，这不是最好的行为，这是一个很好的起点，但更好的是在组件附近添加错误消息，显示究竟出了什么问题。这意味着您将始终必须在组件本身中添加错误处理（与 UI 相关）。

我们公司的同事也在为同一产品工作，我们也在为此而苦苦挣扎。一个是添加错误处理，另一个不是。在我看来，唯一的解决方案是教育开发人员始终添加正确的错误处理。with 的语法并async/await没有那么糟糕：

methods: {
   async login (email, password) {
      try {
         await this.$store.dispatch('auth/login', { email, password })
         // do something after login
      } catch (error) {
         // handle error
      }
   }
}

关于您的最后一件事con：未处理和存储在 vuex 中的错误。. 为什么这是一个骗局？您是否需要全局可用的错误？我经常看到的是人们将如此多的无用状态放入vuex仅用于组件本身的状态中。拥有本地组件状态也不错。因为它是关于登录的，所以这个错误应该只在登录组件中知道。

Answer 2

用于Promise​action

vuex 中的示例：

NEW_AUTH({ commit }) {
    return new Promise((resolve, reject) => {
      this.$axios.$get('/token').then((res) => {
        ...
        resolve();
      }).catch((error) => {
        reject(error);
      })
    })
  }

在页面中：

this.$store.dispatch('NEW_AUTH')
   .then(() => ... )
   .catch((error) => ... )