Nuxt中如何正确处理异步请求的错误？

W″嘉赫提问于 2026-03-03 19:17:17 阅读 63

框架

我在Nuxt 3里用useAsyncData获取接口数据，但网络出错时页面直接白屏，控制台报500。我试过在onErrorCaptured里捕获，但好像没生效，是不是用错了地方？

这是我的组件代码：

const { data, error } = await useAsyncData('posts', () =>
  $fetch('/api/posts')
)
if (error.value) {
  console.log('请求失败', error.value)
}

我来解答赞 8 收藏

反馈

2 条解答

UP主～梦玲 Lv1

error.value 只能拿到错误状态，不会阻止页面渲染。服务端报错时页面照样崩。

在模板里加判断：

<template>

  <div v-if="error">加载失败: {{ error.value?.message }}</div>

  <div v-else-if="pending">加载中...</div>

  <div v-else>{{ data }}</div>

</template>

如果想全局捕获，在 plugins 或 app.vue 里用 onErrorCaptured，或者在 nuxt.config 里配 error 页面。

2026-03-14 14:01

FSD-丽敏 Lv1

我之前也碰到过这个问题，挺让人头大的。Nuxt 在服务端渲染的时候，如果 useAsyncData 里的请求报错，默认会直接抛出异常导致页面渲染中断，所以你会看到白屏。onErrorCaptured 这种生命周期钩子有时候抓不到这种底层的异步错误，特别是发生在服务端的时候。

要解决这个问题，最直接的办法是在 useAsyncData 的第三个参数里加一个 onError 回调。这个回调能拦截错误，阻止 Nuxt 把它当成致命错误处理，这样页面就能正常渲染出来了。

你可以试试这样改代码：

const { data, error } = await useAsyncData('posts', () =>

  $fetch('/api/posts'),

  {

    // 加上这个 onError 配置

    onError: (err) => {

      console.log('虽然报错了，但页面不会白屏', err)

    }

  }

)



if (error.value) {

  // 这里依然可以正常判断，用来显示错误提示

}

这样配置之后，即使接口挂了，Nuxt 也不会直接崩溃，error.value 也会有值，你就可以在页面里显示个友好的错误提示，而不是让用户盯着白屏发呆了。

2026-03-03 21:06