如何处理 nuxtjs 插件中的 axios onError 并向用户显示适当的错误消息

Question

我有一个 nuxt 单页应用程序。我使用的 api 包含各种错误的代码列表。因此，在 onError 拦截器中，必须在字典中或以更理想的方式在 json 文件中检查错误。为此，我在我的 nuxt 项目中添加了一个 error-handler.js 插件。但是，我不知道如何从 json 文件中读取。

1) 每次抛出错误都会加载json文件？

2) 向用户显示错误消息的最佳做法是什么？这个插件是否只负责创建error-message 并且在页面中需要try-catch 来祝酒消息？

export default function ({ $axios, store, app, redirect }) {

  $axios.onError(error => {

    if (error.config.hasOwnProperty('errorHandle') && error.config.errorHandle === false) {
      return Promise.reject(error);
    }

    if (error.message === 'Network Error') {
      error.message = 'check the Internet connection';
      return
    }

    const code = parseInt(error.response && error.response.status)
    if (error.response)
      console.log('error.response', error.response.status, error.response)

    if (error.response.data.Errors) {
      let errMessage = ''
      error.response.data.Errors.forEach(item => {

        switch (item.Message.MessageText) {

             case 'OrganizationNotFound':
             errMessage = 'the organization that you are looking for does not exists'
            break
        }
      })
     }
   }
}

Answer 1

在 Nuxt 中，每次用户访问都会加载一次或两次插件代码，之后在通用模式下不会执行（当然你的 onError 处理程序会执行）。如果您将其设置为仅客户端/服务器端的插件，则为一次，如果您在客户端和服务器上都需要它，则为两次。在您的情况下，仅客户端插件听起来是一个不错的选择 - 只需确保 JSON 的加载超出 onError 函数即可。

至于如何展示，这取决于你的设计。我们正在使用 Vuetify 并在默认布局中使用 v-snackbar，因此它在每个页面上。 Snackbar 绑定到 VueX 值。然后，您的错误插件可以适当地填充该值，因为它可以访问存储。这使得“引发错误”（发送到存储）和“显示错误”合理地解耦，同时非常可重用（组件也可以在遇到问题时发送到存储）。