Nuxt.js和处理动态页面API 404响应

Question

我使用 Nuxt.js，并且有一个动态页面 /items/{id}:

<template>
  <div>
    <h1>Item #{{ item.id }} &laquo;{{ item.title }}&raquo;</h1>
  </div>
</template>

<script>
import { api } from '../../mo/api'

export default {
  asyncData({ params }) {
    return api(`items/${params.id}`)
  },
}
</script>

后端API返回对象{item: {id: .., title: "...", ...}}。 但是如果指定ID的项不存在，API将返回404响应。 Vue会崩溃并显示"[Vue警告]:在呈现期间引用但未定义实例上的属性或方法"。

我该如何处理404响应？

我的api.js模块：

import axios from 'axios'

export function api(url) {
  url = encodeURIComponent(url)
  return axios
    .get(`http://localhost:4444/?url=${url}`)
    .then(({ data }) => {
      return data
    })
    .catch((err) => {
      // 404 catch there
    })
}

解决方案：

需要阅读手册：https://nuxtjs.org/guide/async-data/#handling-errors

- vasa_c

---

将item初始化为null或undefined，并使用v-if/v-else。 - Husam Ibrahim

我可以使用项目中的标准404页面，而不是针对所有这些情况使用v-if吗？ - vasa_c

看过这个了吗？ - Husam Ibrahim

是的，之前它没起作用！但像往常一样，现在它可以工作了：）谢谢！ - vasa_c

很高兴能够帮助您。请确保将解决方案添加到您的问题中或将其发布为答案，以便其他人也可以从中受益。 - Husam Ibrahim

Answer 1

只需执行错误函数 :)

<script>
export default {
  asyncData({ params, error }) {
    return axios
      .get(`https://my-api/posts/${params.id}`)
      .then((res) => {
        return { title: res.data.title }
      })
      .catch((e) => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  },
}
</script>

- Jakub Gadawski

Answer 2

如果您正在使用fetch()钩子，应该这样编写。

<script>
export default {
  async fetch() {
    try {
      await fetch('https://non-existent-website.commmm')
        .then((response) => response.json())
    } catch (error) {
      this.$nuxt.context.error({
        status: 500,
        message: 'Something bad happened',
      })
    }
  },
}
</script>

更多语境可在此处查看: https://nuxtjs.org/announcements/understanding-how-fetch-works-in-nuxt-2-12/#error-handling

- kissu

Answer 3

需要阅读手册：https://nuxtjs.org/guide/async-data/#handling-errors :)。

- vasa_c