nuxt3项目createError的注意事项

Nuxt3 项目 createError 的坑

Nuxt3 项目中，如果需要在页面渲染时抛出错误，取消原本的组件渲染，使用通用的错误页面，官方提供了 createError 方法可以实现。

可以参考的官方文档：
https://nuxt.com/docs/getting-started/error-handling#error-page
https://nuxt.com/docs/guide/directory-structure/error

但是注意如果页面中有使用 useFetch 或者 useAsyncData 等异步数据获取方法，在服务端需要等待接口响应完毕后才能抛出错误，因为服务端没有响应式的概念，如果直接写 createError 就无法捕获错误。

例如：

<script setup>
// 其他逻辑
const { data, error } = useFetch("api/data");
if (error.value) {
  throw createError({ statusCode: 500, message: "接口请求失败" });
}
</script>

上述写法无法正确跳转到错误页面，正确的写法是：

<script setup>
// 其他逻辑
const { data, error } = await useFetch("api/data");
if (error.value) {
  throw createError({ statusCode: 500, message: "接口请求失败" });
}
</script>

添加 await 关键字，保证判断错误信息时接口已经返回，才能跳转到正确页面。

上述写法仅处理了服务端渲染的情况，如果是客户端跳转还需要加上 fatal: true 才能跳转到错误页面。

<script setup>
// 其他逻辑
const { data, error } = await useFetch("api/data");
if (error.value) {
  throw createError({ statusCode: 500, message: "接口请求失败", fatal: true });
}
</script>