首页 前端知识 Nuxt3项目中的问题汇总-刷新页面useFetch无返回

Nuxt3项目中的问题汇总-刷新页面useFetch无返回

2024-07-22 01:07:04 前端知识 前端哥 179 709 我要收藏

坑有千千万,汇总下目前的解决办法,也因为对框架的不够深入,掌握得有限,大家有更好的,请指教【抱拳】

  1. 浏览器刷新的时候页面没有显示数据,接口data无返回。本身nuxt的useFetch在参数不变的情况下,数据是不会重新从后台接口去请求数据的,会直接拿上一次的结果。但是有实时去后台获取数据这样的需求,比如我的关注页面,在其他页面点了关注,每次进这个页面或者刷新都需要去后台重新获取数据,所以我给入参加了一个以时间戳为值的参数key,但是这样导致每次F5刷新页面的时候,都拿不到数据,导致页面没有显示。Suspense不起作用。
    const { data } = await useFetch(
     'http://www.baidu.com/xx-list',
     {
       method: 'get',
       key: uuid(),
       headers: {
         Authorization: 'xxx'
       },
       params: {
         page: currentPage.value,
         size: 10
       }
     }
    )
    console.log('data', data)
    

刷新的时候打印结果data.value是null
在这里插入图片描述
解决1: 加个定时器(不友好)

 <script lang="ts" setup>
	const { data } = await useFetch(
	  'http://www.baidu.com/xx-list',
	  {
	    method: 'get',
	    key: uuid(),
	    headers: {
	      Authorization: 'xxxx'
	    },
	    params: {
	      page: currentPage.value,
	      size: 10
	    }
	  }
	)
	setTimeout(() => {
    	console.log('data', data)
  }, 500);
	
</script>

解决2: 函数方法+await nextTick(),把获取数据接口放在方法里,方法里使用await nextTick(),然后调用方法

<script lang="ts" setup>
import { nextTick } from 'vue'
const feachData = async (key = '') => {
  await nextTick()
  const { data, pending, error, refresh } = await useFetch(
    'http://www.baidu.com/xx-list',
    {
      method: 'get',
      key: uuid(),
      headers: {
        Authorization: 'xxx'
      },
      params: {
        page: currentPage.value,
        size: 10
      }
    }
  )
  console.log('data', data.value)
}
feachData()
<script>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14215.html
标签
评论
发布的文章

TEGG学习总结

2024-08-07 00:08:45

ajax笔记二

2024-03-12 01:03:25

jQuery 密码验证

2024-08-07 00:08:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!