logo cmdragon's Blog

使用 useLazyFetch 进行异步数据获取

avatar
cmdragon 渡劫
  2024-07-20 00:00:00   2024-07-20 00:00:00   855 字  3 分钟
image image

扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

在 nuxt 开发中，我们经常需要进行异步数据获取。useLazyFetch是一个对useFetch的封装，它提供了一种在处理程序解析之前触发导航的方式。

一、useLazyFetch 的特点**

  1. 立即触发导航：默认情况下，useFetch在异步处理程序解析之前会阻止导航。而useLazyFetch通过将lazy选项设置为true
    ，可以在处理程序解析之前触发导航。

  2. 与useFetch相同的签名：useLazyFetch具有与useFetch相同的签名，这使得它易于使用和理解。

  3. 像下面这样调用useLazyFetch来获取数据：

1
const { pending, data: posts } = await useLazyFetch('/api/posts')

pending表示数据获取的状态（是否正在加载），posts则存储获取到的数据。

二、使用步骤

  1. 调用useLazyFetch：使用useLazyFetch来获取数据，并将获取到的数据存储在变量中。
  2. 处理待处理和错误状态：通过pending变量来检查数据是否正在加载，通过error变量来处理可能出现的错误。
  3. 监视数据变化：使用watch函数来监视数据的变化，并在数据加载完成后进行相应的操作。
  4. 在模板中使用数据：根据pending的值来显示加载中的提示，或者在数据加载完成后显示数据。

三、示例代码

处理待处理和错误状态：

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div v-if="pending">
    加载中...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- 对每个 post 进行相关操作 -->
    </div>
  </div>
</template>

通过上述模板代码，根据pending的值来显示不同的内容。当pending为true时，显示“加载中…”，否则显示获取到的数据。

监视数据变化：

1
2
3
watch(posts, (newPosts) => {
  // 当 posts 数据发生变化时执行的操作
})

四、注意事项

  1. useLazyFetch是编译器转换的保留函数名，因此你不应该将自己的函数命名为useLazyFetch。
  2. 在使用useLazyFetch时，需要根据你的项目实际情况来替换useFetch。
  3. 要确保提供的 API 路径（如上述示例中的/api/posts）是正确有效的。
  4. 在处理数据时，需要注意数据可能为空的情况，避免出现异常。

往期文章归档：

使用 useLazyFetch 进行异步数据获取
posts/117488d6538b/
作者
cmdragon
发布于
2024-07-20 00:00
许可
  1. 1. 一、useLazyFetch 的特点**
  2. 2. 二、使用步骤
  3. 3. 三、示例代码
  4. 4. 四、注意事项
  5. 5. 往期文章归档：
  1. 1. 一、useLazyFetch 的特点**
  2. 2. 二、使用步骤
  3. 3. 三、示例代码
  4. 4. 四、注意事项
  5. 5. 往期文章归档：