Nuxt3 中 useFetch、useLazyFetch 的区别

已于 2022-02-10 19:31:05 修改
阅读量3.7k 收藏
点赞数 1
分类专栏： vue 文章标签： 前端 javascript vue.js
于 2022-01-26 19:20:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanyang1116/article/details/122707421
版权

* useFetch 和 useLazyFetch 的区别：

* 1. 在服务端渲染的时候，这两个没差别

* 2. 在客户端渲染的时候（单页），useLazyFetch 相当于请求是数据是 suspense 的

* 而 useLazyFetch 一定要全部请求完毕，才进行路由内容的显示。

(↑↑↑，这个功能本质是通过 数据获取 | Vue Router 这个实现的)

* 看起来 useFetch 的使用场景会更多一些，除非一些特殊的场景

* useAsyncData 和 useAsyncLazyData 的区别和 fetch 一样

* 只是 useAsyncData 可以接受任何函数和逻辑，返回 Promise（提供了组合的功能）

yanyang1116
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3+Nuxt3实战在线教育SSR网站
03-24
Vue3+Nuxt3实战在线教育SSR网站基于Nuxt3搭建的页面
nuxt-new-fetch-example：nuxt新的获取api示例
02-09
nuxt-new-fetch-api 我值得称赞的Nuxt.js项目 构建设置 # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run build $ npm run start # generate static project $ npm run generate 有关工作原理的详细说明，请查看 。
Nuxt3：useFetch在服务端及客户端重复请求问题
q1003675852的博客
03-04 1461
本文针对Nuxt3 使用useFetch过程中发现不仅在服务端发送了接口请求，而且在客户端也重新发送了一遍接口请求的问题，给出了问题产生的原因和解决方案。
Nuxt3: useFetch使用过程常见一种报错
q1003675852的博客
03-13 1188
本文主要记录了Nuxt3在使用useFetch时遇到的nuxt instance unavailable或A composable that requires access to the Nuxt instance was called outside of a plugin...报错问题及其产生的原因。
3.vueuse-createFetch实现接口请求及其封装(代替axios)
weixin_42386379的博客
04-18 2016
vueuse-createFetch(useFetch)的使用及接口封装
nuxt3 useFetch请求封装
qi_qi_ai的博客
09-25 839
nuxt 3useFetch请求封装
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 useFetch封装一个api接口http请求 - 解决刷新页面useFetch无返回
weixin_55042716的博客
04-10 5568
比如我的关注页面，在其他页面点了关注，每次进这个页面或者刷新都需要去后台重新获取数据，所以我给入参加了一个以时间戳为值的参数key，但是这样导致每次F5刷新页面的时候，都拿不到数据，导致页面没有显示。Suspense不起作用。浏览器刷新的时候页面没有显示数据，接口data无返回。本身nuxt的useFetch在参数不变的情况下，数据是不会重新从后台接口去请求数据的，会直接拿上一次的结果。但是有实时去后台获取数据这样的需求，项目中封装接口请求，并且解决刷新页面useFetch无返回数据问题。
Nuxt3 封装useFetch请求,并防止参数自动更新请求
lxRime的博客
07-15 5128
Nuxt3 封装请求，并防止参数更改自动请求
useFetch
宏斌的博客
02-23 1773
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(() =&
react 生命挂钩_useFetch和自定义React挂钩
weixin_26750481的博客
09-14 432
react 生命挂钩 第一要务 (First Things First) Released with React 16.8, React Hooks changed the way we see components. They made using React class components unnecessary. Reducing the importance of class-based...
nuxt3服务端获取数据demo.rar
11-26
nuxt3服务端获取数据demo.rar. nuxt3. Ts ssr 在服务端获取数据，随html一起返回浏览器的demo。封装好的 get 跟post请求 可以方便移植到项目中，或者直接在这修改！欢迎下载。免c币下载地址：...
手把手教您使用Nuxt3框架(Nuxt3中文开发教程)-基于Nuxt3.0.0稳定版验证文档
11-25
本文档适合Nuxt3初学者学习和实践，资深者快速参考，爱好者持续跟踪新功能和最佳实践。从版本v3.0.0-rc.10开始参考官网手册和官方示例，从技术相关性、易于理解和方便查询来重新组织编写此文档，力求覆盖Nuxt3官网...
手把手教您使用Nuxt3框架+Nuxt3中文开发教程+基于Vue3的混合渲染框架Nuxt3,教程35个功能配套示例源代码完整包
11-25
ROUTES路由：服务端处理（server）,$fetch：数据获取,useAsyncData和useLazyAsyncData：数据获取,useFetch和useLazyFetch：数据获取,异常处理,混合渲染之指定客户端渲染,SEO配置之路由元数据使用,SEO配置之组件化和...
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 228
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 512
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 974
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 172
两个前端标签
前端Vue2项目搭建过程
xuemen11的博客
04-25 1212
vue2,vuex,vant组件库
nuxt3 $fetch
04-04
Nuxt3 $fetch is a new method introduced in Nuxt3 which allows you to fetch data from an external API or server-side rendered (SSR) page. It replaces the $axios module used in Nuxt2. $fetch is a lifecycle hook that is called before the component is rendered. It can be used to fetch data and then render the component with the fetched data. Here is an example of how to use $fetch in Nuxt3: ```javascript <script> export default { async $fetch() { const response = await fetch('https://example.com/api/data') const data = await response.json() return { data } }, data() { return { data: {} } } } </script> <template> <div> <p>{{ data }}</p> </div> </template> ``` In this example, $fetch is used to fetch data from an external API and then the data is stored in the component's data object. Note that $fetch is an asynchronous method and it must return a Promise or resolve with the fetched data.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值