Nuxt3 请求数据

问题描述

在 Nuxt3 中，我们通常使用 useFetch 来获取接口数据，一般情况下我们会在页面中这样使用

const data = await useFetch("/api/data")

这样使用的时候，如果接口返回很慢，会导致页面一直在加载状态。如果此时有页面跳转的话，我们会一直停留在之前的页面，直至请求完成，nuxt 才会跳转至新页面。

我们怎么操作才能有更好的用户体验呢？

解决方案

1. 显示加载状态

数据加载会阻塞页面跳转，如果有页面跳转时，用户可能为认为页面卡死或者没有对页面进行操作

这时我们的解决方案可以是：显示一个加载状态，让用户可以感知当前页面正在加载数据。

我们可以使用内置的

nuxt-loading-indicator

app.vue

这样做的话，在接口没返回数据前，页面会一直停留在跳转之前的页面。可能会给用户留下系统很卡的感觉。我们可不可以再做一些优化呢？

2. 为 useFetch 配置

{lazy: true}

我们可以为 useFetch 的配置

{lazy: true}

const { pending, data } = await useFetch("/api/data", { lazy: true })

这时，useFetch 的返回值里会有一个 pending 属性，pending 表示数据是否还未加载完成。我们可以在 pending 为 true 时做一些操作。

这样依赖，用户可以在点击后直接进入要跳转的页面。至于在接口请求时要展示的内容，就有很多发挥空间了。

我们可以展示一个加载页？或许我们可以展示一个骨架屏。。。

3. 使用 useLazyFetch

当然，Nuxt3 也为我们提供了 useLazyFetch 这个函数，效果与手动配置 lazy: true 相同。

const { pending, data } = await useLazyFetch("/api/data")

注意： 这里是否有 await 都不影响数据的懒加载

后续我会通过一个

宝可梦图鉴