NuxtJS3链式useFetch转useLazyFetch后刷新数据丢失问题求助

一、刷新页面数据丢失的原因及修复 #

原因 #

替换第一个useFetch为useLazyFetch后仍保留await是核心问题：useLazyFetch设计为不阻塞组件渲染，它不会返回可等待的Promise，await无法等待请求完成。在SSR关闭（ssr:false）的客户端渲染模式下，刷新页面时组件会先挂载，此时dataPost.value还是初始的null，后续依赖它的链式请求不会执行，最终导致finalPost没有被填充数据。

而热重载时Nuxt会保留组件状态，所以数据能正常显示，但刷新后状态重置，问题就暴露了。

修复步骤 #

1. 移除useLazyFetch前的await，直接获取返回的data和pending状态。
2. 使用watch监听dataPost的变化，当数据返回后再执行后续的链式请求逻辑。

二、链式请求优化建议 #

1. 并行执行非依赖请求 #

拿到帖子数据后，用户信息、回复数、分享数、反应数这几个请求之间没有依赖关系，可以用Promise.all并行发起，减少总请求耗时。

2. 后端聚合接口优化 #

作为后端开发者，你可以新增一个聚合API接口（比如/api/v1/bp/post/${props.Id}/full），一次性返回帖子详情、作者信息、各类计数数据，从根源上减少HTTP请求次数，提升加载效率。

3. 封装请求逻辑 #

用useAsyncData封装整个请求流程，更符合Nuxt的状态管理规范，也便于复用和维护。

4. 增加错误处理 #

添加请求失败的捕获逻辑，避免请求出错后页面状态异常。

修改后的代码示例 #

<script setup>
const props = defineProps(['Id'])

const finalPost = ref({
  Id: "",
  UserName: "",
  Name: "",
  Content: "",
  DatePost: "",
  SharedId: "",
  ReplyTo: "",
  QuoteTo: "",
  ReactionsCount: "",
  ShareQuotedCount: "",
  ResponseCount: "",
})

// 使用useLazyFetch，不使用await
const { data: dataPost, pending: postPending, error: postError } = useLazyFetch(`http://localhost:8080/api/v1/bp/post/${props.Id}`)

// 监听dataPost的变化，数据返回后执行后续逻辑
watch(dataPost, async (newPostData) => {
  if (!newPostData?.Data?.post) return

  const fetchedPost = newPostData.Data.post
  // 填充帖子基础信息
  finalPost.value = {
    ...finalPost.value,
    Id: fetchedPost.Id,
    Content: fetchedPost.Content,
    DatePost: fetchedPost.DatePost,
    SharedId: fetchedPost.SharedId,
    ReplyTo: fetchedPost.ReplyTo,
    QuoteTo: fetchedPost.QuoteTo,
  }

  try {
    // 并行发起后续请求
    const [userRes, repliesCountRes, sharesCountRes, reactionsCountRes] = await Promise.all([
      $fetch(`http://localhost:8080/api/v1/bp/user/i/${fetchedPost.OwnerUid}`),
      $fetch(`http://localhost:8080/api/v1/bp/post/${props.Id}/replies/count`),
      $fetch(`http://localhost:8080/api/v1/bp/post/${props.Id}/shares/count`),
      $fetch(`http://localhost:8080/api/v1/bp/post/${props.Id}/reactions/count`),
    ])

    // 填充用户信息
    if (userRes?.Data?.user) {
      finalPost.value.UserName = userRes.Data.user.Username
      finalPost.value.Name = userRes.Data.user.Name
    }

    // 填充各类计数
    finalPost.value.ResponseCount = repliesCountRes?.Data?.count || ""
    finalPost.value.ShareQuotedCount = sharesCountRes?.Data?.count || ""
    finalPost.value.ReactionsCount = reactionsCountRes?.Data?.count || ""
  } catch (err) {
    console.error('请求失败:', err)
    // 这里可以添加错误提示逻辑
  }
}, { immediate: true }) // immediate: true 确保组件挂载时如果dataPost已有数据（比如缓存）也会执行
</script>

内容的提问来源于stack exchange，提问作者Witch-Captain Nakou