Nuxt3：探索useFetch是如何做到避免客户端重复请求

已于 2024-06-26 13:40:15 修改
阅读量2.1k 收藏 7
点赞数 5
分类专栏： Vue 文章标签： Nuxt 前端 vue.js
于 2024-03-05 11:30:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q1003675852/article/details/136472341
版权

在之前的文章《Nuxt3：useFetch在服务端及客户端重复请求问题》中提到了useFetch在服务端及客户端重复请求问题，文中提到Nuxt在服务端获取数据后，会将数据附加到Nuxt payload（也就是nuxtApp.payload），它和文中提到的__NUXT_DATA__之间应该是有关联的，具体是如何关联上的，本文将展开来讲。

Nuxt payload与 __NUXT_DATA__

在这里不直接讲结论，而是先讲一下获取结论的过程，这可能是部分伙伴看完结论更感兴趣的事情，我觉得这个更有价值。

之前文章提到数据存在于<script type="application/json" id="__NUXT_DATA__" data-ssr="true">节点之中：
在这里插入图片描述

首先想到的是去官网查找一下是否有__NUXT_DATA__的相关介绍（可惜没有发现）

接着是去github的issues看一下：

最低0.47元/天 解锁文章
nuxt3发请求
web_xiaolei的博客
01-07 325
nuxt3发请求
Nuxt3: 强制删除__NUXT_DATA__的一种方式
q1003675852的博客
06-26 1355
本文记录Nuxt3: 强制删除__NUXT_DATA__的一种方式，只在开发环境中验证，仅供参考。
Nuxt3：useFetch在服务端及客户端重复请求问题
q1003675852的博客
03-04 5145
本文针对Nuxt3 使用useFetch过程中发现不仅在服务端发送了接口请求，而且在客户端也重新发送了一遍接口请求的问题，给出了问题产生的原因和解决方案。
Nuxt3 封装useFetch请求,并防止参数自动更新请求
lxRime的博客
07-15 7575
Nuxt3 封装请求，并防止参数更改自动请求
【前端】【Nuxt3】Nuxt3中usefetch,useAsyncData,$fetch使用与区别
最新发布
qq_59344127的博客
04-09 609
useFetch和是 Nuxt 推荐的数据获取 API，自动集成 SSR 与客户端导航流程。$fetch是更底层的请求方法，不具备自动触发、缓存等集成功能。请求行为可通过serverlazyimmediatewatch等选项精细控制。server和lazy在行为上都可实现“跳过 SSR 请求”，但语义和应用场景不同。(1) 用户通过<NuxtLink>等方式从一个页面跳转到另一个页面。(2) 页面不会重新加载，浏览器地址变更但保持在 SPA 环境中。在 SSR 首屏优化方面，
前端接口防止重复请求实现方案
qq_74217055的博客
03-29 692
例如用户多次点击按钮，多次请求接口，怎样才能做到将多余的请求筛掉，后端只返回一次结果呢？首先我想到的就是处理，多次发起请求，一段时间间隔内只有一次请求会生效，但想了想还有其他更加好的解决方案。
nuxt3 useFetch封装一个api接口http请求 - 解决刷新页面useFetch无返回
weixin_55042716的博客
04-10 6647
比如我的关注页面，在其他页面点了关注，每次进这个页面或者刷新都需要去后台重新获取数据，所以我给入参加了一个以时间戳为值的参数key，但是这样导致每次F5刷新页面的时候，都拿不到数据，导致页面没有显示。Suspense不起作用。浏览器刷新的时候页面没有显示数据，接口data无返回。本身nuxt的useFetch在参数不变的情况下，数据是不会重新从后台接口去请求数据的，会直接拿上一次的结果。但是有实时去后台获取数据这样的需求，项目中封装接口请求，并且解决刷新页面useFetch无返回数据问题。
useFetch
宏斌的博客
02-23 1833
import { useEffect, useState } from "react"; const useFetch = (url = "", options = undefined) => { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); useEffect(() =&
Nuxt3 中 useFetch、useLazyFetch 的区别
关灯吃面
01-26 4125
* useFetch 和 useLazyFetch 的区别： * 1. 在服务端渲染的时候，这两个没差别 * 2. 在客户端渲染的时候（单页），useLazyFetch 相当于请求是数据是 suspense 的 * 而 useLazyFetch 一定要全部请求完毕，才进行路由内容的显示。 * 看起来 useLazyFetch 的使用场景会更多一些，除非一些特殊的场景 * * useAsyncData 和 useAsyncLazyData 的区别和 fetch 一样 * 只是 useAsyncD
nuxt3 usefetch 重复请求 getUrl
12-29
### Nuxt3 中 `useFetch` 导致重复请求 `getUrl` 的解决方案 在 Nuxt3 应用程序中，`useFetch` 是一个用于发起 HTTP 请求的组合式函数。然而，在某些场景下可能会遇到重复请求的问题。为了避免这种情况的发生，可以...
Nuxt3: useFetch使用过程常见一种报错
q1003675852的博客
03-13 3732
本文主要记录了Nuxt3在使用useFetch时遇到的nuxt instance unavailable或A composable that requires access to the Nuxt instance was called outside of a plugin...报错问题及其产生的原因。
useFetch：获取React的钩子
02-15
useFetch 获取React的钩子 安装 npm install @ahmetelgun/usefetch 用法 import useFetch from "@ahmetelgun/usefetch" ; . . const [ response , loading , error ] = useFetch ( "url" ) ; if ( loading ) { return < div> loading < / div > ; } else if ( error ) { return < div> error < / div > ; } else if ( response ) { //use response } { //response schema status : 200 , data : { //data
【Nuxt3】使用内置方法获取网络数据和使用场景
qq_2511276124的博客
03-29 4286
记录下如何使用useFetch和$fetch的使用方法和它们的使用场景。这些方法获取数据够用了，不建议额外使用axios或request等第三方请求库。
React Hooks 之 useFetch
weixin_33973609的博客
05-20 3528
前言 自 React Hooks 16.8.0 后带来了 React hooks 这一特性。这一特性在没有破坏性的更新下为我们带来了更加舒爽的开发方式。过去我们常常因providers，consumers，高阶组件，render props 等形成“嵌套地狱”。尽管 Class Component 在某种程度上为我们提供了更方便的写法以及生命周期，但同时也带来了一些不好的地方。例如难以理解的 c...
Nuxt3项目中的问题汇总-刷新页面useFetch无返回
qq_38661597的博客
03-09 7526
nuxt3 刷新页面的时候usefetch加了key值后，打印结果data.value是null,获取不到数据。解决1: 加个定时器（不友好）解决2： await nextTick()
2023年7-9月前端学习笔记
weixin_48894212的博客
07-03 629
【代码】2023年7月前端学习笔记。技术：vue、nuxt3、ts
nuxt3+ts+vue3的ssr项目总结
qq_45799465的博客
08-30 6678
1.浅谈SSR，SEO，SPA 2.NUXT3的基本使用 3.NUXT3引入element plus 4.NUXT3引入mavon-editor 5.NUXT3中v-if与v-show的对比 6.Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode') 7.NUXT3中含有el-tooltip所有组件服务器渲染异常
Nuxt3请求封装数据获取详解、useState和useCookie的使用
热门推荐
m0_63281537的博客
09-05 1万+
在Nuxt2中，如果我们要使用cookie,需要引入插件js-cookie，在Nuxt3中，也不再集成Vuex，可以利用Nuxt3的composables自动导入属性，把它们定义在composables目录中，这样他们将成为全局类型安全的状态。首先我们需要在项目的根目录新建composables文件夹，然后创建状态管理文件如：composables/state.ts.五、useState和useCookie的使用。如何获取修改 state 值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晓风伴月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值