Nuxt 3 useFetch 请求数据不渲染,怎么解决?

// ~data/article.ts
export const useArticleList = (options: ArticleListOptions) => {
  const { pending, data: result } = postFetch('/notebook', options)
  return {
    result,
    pending
  } as any
}

// list.vue
const { result } = useArticleList({
  current: current.value
})

const articleList = computed(() => {
  if (result.value) {
    const { code, data, msg } = result.value
    if (code === 200) {
      return data
    } else {
      console.error(new Error(msg))
    }
  }
  return [] as any[]
})

上述代码在开发阶段,pc 和 移动端模拟器中访问,数据请求正常且渲染成功;
部署服务器后,移动端真机没有发起请求,其他访问方式正常。
有无大佬遇到过或知道怎么解决?

目标站点(未备案) http://114.132.79.6/

阅读 3.7k
1 个回答

经过排查,依旧不知道是什么原因导致的。
现在请求方式依旧,但在接收时加了个 pending 用来做加载中提示,计算里面的 result.value 改为 unref(result),稍微等待后可以拿到返回数据。

const { result, pending } = useArticleList({
  current: current.value
})

const articleList = computed(() => {
  if (!pending.value) {
    const { code, data, msg } = unref(result)
    if (code === 200) {
      return data
    } else {
      console.error(new Error(msg))
    }
  }
  return [] as any[]
})

然后,代码体积大了 1.5MB,我不理解
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏