我使用 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 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
})
}
解决方案:
最佳答案
只需执行错误函数:)
<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>
关于vue.js - Nuxt.js 并处理动态页面的 API 404 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53500137/