适用于404的NUXT JS拦截器或使用错误方法无法正常工作的任何错误

Question

版本

v5.8.0

复制链接

https://github.com/msonowal/nuxt-bug-reproduce-link

复制步骤

在此添加 plugins目录将文件命名为axios.js

并在nuxt config plugins数组中添加链接 访问任何axios呼叫为404的路线

下面的axios.js文件内容

export default function({ $axios, error }) {
  $axios.onError((responseError) => {
    if (responseError.response.status === 404) {
      error({ statusCode: 404, message: 'Post not found from interceptor' })
    }
  })
}

期望什么？

显示nuxt应用程序中定义的带有404代码的错误响应 在拦截器中找不到帖子

但是

不重定向到301

实际上发生了什么？

它显示默认nuxt错误

NuxtServerError Request failed with status code 404

_{此错误报告可在Nuxt社区（#c305）上获得}

Answer 1

这似乎对我有用

_.vue

async asyncData(context) {
  ...
  try {
    const response = await context.$axios(options);
    ...          
  } catch (error) {
    context.error({ statusCode: 404, message: 'Page not found' });
  }
}

错误.vue

<template>
  <h1>{{ error.message }}</h1>
</template>

<script>
  export default {
    head() {
      return {
        title: `${this.statusCode} | ${this.message}`,
      }
    },
    props: {
      error: {
        type: Object,
        default: null
      }
    },
    computed: {
      statusCode() {
        return (this.error && this.error.statusCode) || 500;
      },
      message() {
        return this.error.message;
      }
    }
  }
</script>

Answer 2

这是您处理错误404的方式

asyncData({ $axios, params, error }) {
    return $axios
      .get(`/user/${params.profile}`)
      .then(res => {
        return { user: res.data.data };
      })
      .catch(e => {
        error({ statusCode: 404, message: 'Page not found' });
      });
  },