[{"data":1,"prerenderedAt":174},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fnuxt3-fetch-data":3,"surround:\u002Fposts\u002F2024\u002Fnuxt3-fetch-data":163},{"id":4,"title":5,"body":6,"canonical":131,"categories":132,"date":134,"description":135,"draft":136,"extension":137,"image":138,"meta":139,"navigation":140,"path":141,"permalink":131,"readingTime":142,"recommend":131,"references":147,"seo":157,"sitemap":158,"stem":159,"tags":160,"type":131,"updated":134,"__hash__":162},"content\u002Fposts\u002F2024\u002Fnuxt3-fetch-data.md","Nuxt3 请求数据",{"type":7,"value":8,"toc":119},"minimark",[9,13,17,28,31,34,37,42,45,48,59,62,69,75,81,84,87,90,94,97,103,109,112],[10,11,12],"h2",{"id":12},"问题描述",[14,15,16],"p",{},"在 Nuxt3 中，我们通常使用 useFetch 来获取接口数据，一般情况下我们会在页面中这样使用",[18,19,25],"pre",{"className":20,"code":22,"language":23,"meta":24},[21],"language-ts","const data = await useFetch(\"\u002Fapi\u002Fdata\")\n","ts","",[26,27,22],"code",{"__ignoreMap":24},[14,29,30],{},"这样使用的时候，如果接口返回很慢，会导致页面一直在加载状态。如果此时有页面跳转的话，我们会一直停留在之前的页面，直至请求完成，nuxt 才会跳转至新页面。",[14,32,33],{},"我们怎么操作才能有更好的用户体验呢？",[10,35,36],{"id":36},"解决方案",[38,39,41],"h3",{"id":40},"_1-显示加载状态","1. 显示加载状态",[14,43,44],{},"数据加载会阻塞页面跳转，如果有页面跳转时，用户可能为认为页面卡死或者没有对页面进行操作",[14,46,47],{},"这时我们的解决方案可以是：显示一个加载状态，让用户可以感知当前页面正在加载数据。",[14,49,50,51,54,55,58],{},"我们可以使用内置的",[26,52,53],{"code":53},"nuxt-loading-indicator","标签，将其放置于 ",[26,56,57],{"code":57},"app.vue"," 组件中，这样在页面加载数据时，顶部会出现一个加载条。用户会感知到页面的变化，不至于误认为自己未进行操作或者以为页面卡死。",[14,60,61],{},"这样做的话，在接口没返回数据前，页面会一直停留在跳转之前的页面。可能会给用户留下系统很卡的感觉。我们可不可以再做一些优化呢？",[38,63,65,66],{"id":64},"_2-为-usefetch-配置lazy-true","2. 为 useFetch 配置",[26,67,68],{"code":68},"{lazy: true}",[14,70,71,72,74],{},"我们可以为 useFetch 的配置",[26,73,68],{"code":68},"，可以实现数据懒加载。这样，在加载数据时，页面的跳转和渲染不会被阻塞。",[18,76,79],{"className":77,"code":78,"language":23,"meta":24},[21],"const { pending, data } = await useFetch(\"\u002Fapi\u002Fdata\", { lazy: true })\n",[26,80,78],{"__ignoreMap":24},[14,82,83],{},"这时，useFetch 的返回值里会有一个 pending 属性，pending 表示数据是否还未加载完成。我们可以在 pending 为 true 时做一些操作。",[14,85,86],{},"这样依赖，用户可以在点击后直接进入要跳转的页面。至于在接口请求时要展示的内容，就有很多发挥空间了。",[14,88,89],{},"我们可以展示一个加载页？或许我们可以展示一个骨架屏。。。",[38,91,93],{"id":92},"_3-使用-uselazyfetch","3. 使用 useLazyFetch",[14,95,96],{},"当然，Nuxt3 也为我们提供了 useLazyFetch 这个函数，效果与手动配置 lazy: true 相同。",[18,98,101],{"className":99,"code":100,"language":23,"meta":24},[21],"const { pending, data } = await useLazyFetch(\"\u002Fapi\u002Fdata\")\n",[26,102,100],{"__ignoreMap":24},[104,105,106],"blockquote",{},[14,107,108],{},"注意： 这里是否有 await 都不影响数据的懒加载",[110,111],"hr",{},[14,113,114,115,118],{},"后续我会通过一个 ",[26,116,117],{"code":117},"宝可梦图鉴"," 的项目，来讲述如何使用 useFetch 和 useLazyFetch 来优化数据请求的体验。",{"title":24,"searchDepth":120,"depth":120,"links":121},4,[122,124],{"id":12,"depth":123,"text":12},2,{"id":36,"depth":123,"text":36,"children":125},[126,128,130],{"id":40,"depth":127,"text":41},3,{"id":64,"depth":127,"text":129},"2. 为 useFetch 配置{lazy: true}",{"id":92,"depth":127,"text":93},null,[133],"代码","2024-06-05 22:26:42","请求数据的最佳实践",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F67a1b535e67fc-78.webp",{},true,"\u002Fposts\u002F2024\u002Fnuxt3-fetch-data",{"text":143,"minutes":144,"time":145,"words":146},"3 min read",2.98,178800,596,[148,151,154],{"title":149,"link":150},"A Better Approach To Data Fetching In Nuxt?","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=HiFV027dEzk",{"title":152,"link":153},"useFetch","https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-fetch",{"title":155,"link":156},"useLazyFetch","https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-fetch",{"title":5,"description":135},{"loc":141},"posts\u002F2024\u002Fnuxt3-fetch-data",[161],"Nuxt","999fAoE6lCxEt5DkrVpIchH8GQQdX4zbbi6mPYAal3M",[164,169],{"title":165,"path":166,"stem":167,"date":168,"type":131,"children":-1},"leetcode 两数之和","\u002Fposts\u002F2024\u002Fleetcode-two-sum","posts\u002F2024\u002Fleetcode-two-sum","2024-05-18 11:00:25",{"title":170,"path":171,"stem":172,"date":173,"type":131,"children":-1},"code review 黑话摘录","\u002Fposts\u002F2024\u002Fcode-review-short-code","posts\u002F2024\u002Fcode-review-short-code","2024-06-08 22:22:49",1789642591844]