通过 100 多个技巧学习 Nuxt!

createError

创建一个包含附加元数据的错误对象。

你可以使用此函数创建一个包含附加元数据的错误对象。它可以在你的应用程序的 Vue 和 Nitro 部分中使用,并且旨在被抛出。

参数

  • err: string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }

你可以传递一个字符串或一个对象给 createError 函数。 如果你传递一个字符串,它将用作错误 message,并且 statusCode 将默认为 500。 如果你传递一个对象,则可以设置错误的多个属性,例如 statusCodemessage 和其他错误属性。

在 Vue 应用程序中

如果你抛出一个用 createError 创建的错误

  • 在服务器端,它将触发一个全屏错误页面,你可以使用 clearError 清除该页面。
  • 在客户端,它将抛出一个非致命错误,供你处理。 如果你需要触发全屏错误页面,则可以通过设置 fatal: true 来实现。

示例

pages/movies/[slug].vue
<script setup lang="ts">
const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)
if (!data.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}
</script>

在 API 路由中

使用 createError 在服务器 API 路由中触发错误处理。

示例

server/api/error.ts
export default eventHandler(() => {
  throw createError({
    statusCode: 404,
    statusMessage: 'Page Not Found'
  })
})

在 API 路由中,建议使用 createError 并传递一个包含简短 statusMessage 的对象,因为它可以在客户端访问。否则,传递给 API 路由上的 createErrormessage 将不会传播到客户端。或者,你可以使用 data 属性将数据传递回客户端。在任何情况下,都应始终考虑避免将动态用户输入放入消息中,以避免潜在的安全问题。

请在 文档 > 入门 > 错误处理 中阅读更多内容。