Question

当我在nuxt / axios插件中发现错误时，我调用上下文中提供的错误函数以显示错误页面，但404错误除外，当请求失败并带有其他状态码（例如403）时，来自节点始终为Status Code: 500 NuxtServerError，并且自定义错误页面未按预期显示。

  $axios.onError(err => {
    console.log('error:', err); // error: Request failed with status code 403
    // const code = parseInt(err.response && err.response.status)
    // if(code === 403) {
    //   error({ statusCode: 403, message: 'WTF' })
    // }
    error({ statusCode: 403, message: 'WTF' })
  })

但是它总是显示NuxtServerError页面。如何按预期显示我的自定义错误页面？

更新：即使总是调用错误功能也无济于事

此处演示：https://codesandbox.io/s/r75v2100lp

添加一个终端标签，然后执行npm run dev

Answer 1

我们不应在nuxtServerInit中抛出错误以保持初始化成功。我们可以在try catch中处理nuxtServerInit中发生的错误，并根据代码执行catch中的任何操作

try {
   const res = await this.$axios.$get("http://httpstat.us/403");
   console.log("res:", res);
   commit("SET_RES", res);
} catch(e){
    console.log("handle error:"+ e)
}

这是沙箱https://codesandbox.io/s/rj23o8ynwq

Answer 2

如果你不想得到 Nuxt 服务器错误，你应该在 onError 处理程序中返回一些东西。例如，您可能在处理 onError 处理程序中的错误后返回 false 或 true。

在插件文件夹中创建一个类似 axios.js 的插件：

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

    $axios.onError(
        (error) => {
            console.log(error.response);
            // handle your errors here

            // maybe you maybe reject promise
            return Promise.reject(error.response);

            // Or just return true or false
            // return false
        }
    );
}

如果你不想返回任何东西，那么你应该在他们被调用的地方处理请求：

this.$axios.$post(`/api/calendars/events/`, this.event_data).then(
    (data) => {
         // do anything after request
         this.clear_form()
    }
)

这里不需要处理错误，只需在 axios.js 插件中处理即可。

请求失败时不显示自定义错误页面

2 个答案: