Nuxt.js 并处理动态页面的 API 404 响应答案

【问题标题】：Nuxt.js and handle API 404 response for dynamic pagesNuxt.js 并处理动态页面的 API 404 响应
【发布时间】：2019-04-29 05:18:27
【问题描述】：

我使用 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 :)

【问题讨论】：

用null 或undefined 初始化item 并使用v-if / v-else。
我可以在我的项目中使用标准 404 页面，而不是在所有这些情况下使用 v-if 吗？
见过this?
是的。它没有用！但像往常一样现在它工作了:)）谢谢！
很高兴我能帮上忙。请确保将解决方案添加到您的问题中或将其作为答案发布，以便其他人可以从中受益。

标签： vue.js nuxt.js

【解决方案1】：

只执行错误函数:)

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' })
        })
      }
    }

【讨论】：

【解决方案2】：

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

【讨论】：