我使用 Nuxt.js,并且有一个动态页面 /items/{id}
:
<template>
<div>
<h1>Item #{{ item.id }} «{{ item.title }}»</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
})
}
解决方案:
item
初始化为null
或undefined
,并使用v-if
/v-else
。 - Husam Ibrahim