vue.js - 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 warn]:属性或方法“item”未在实例上定义，但在渲染期间被引用。”

如何处理 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

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>