首页 > 其他分享 >轻松掌握useAsyncData获取异步数据

轻松掌握useAsyncData获取异步数据

时间:2024-07-12 16:24:22浏览次数:14  
标签:异步 cmdragon 轻松 Blog useAsyncData data 函数


title: 轻松掌握useAsyncData获取异步数据
date: 2024/7/12
updated: 2024/7/12
author: cmdragon

excerpt:
摘要:本文详细介绍Nuxt.js中的useAsyncData组合式函数,它用于在服务端渲染(SSR)过程中异步获取数据,确保客户端正确水合,避免重复请求。内容包括基本概念、参数说明(key, handler, options)、示例用法、如何监听参数变化自动刷新数据及返回值详解,展示了在页面组件中使用useAsyncData的具体方式和注意事项。

categories:

  • 前端开发

tags:

  • Nuxt.js
  • 异步数据
  • SSR
  • 组件函数
  • 数据获取
  • 响应式对象
  • 服务端渲染

image

image

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

在Nuxt.js中,useAsyncData是一个非常有用的组合式函数,它允许我们在服务端渲染(SSR)的过程中异步获取数据,同时确保这些数据能够在客户端正确地水合(hydrate),避免了不必要的重复请求。

基本概念

useAsyncData是一个组合式函数,它可以在 Nuxt
应用中的页面、组件或插件中使用。这个函数接受一个唯一的键和一个异步函数,异步函数的返回值将作为数据源。useAsyncData
返回一个响应式对象,其中包含了数据、加载状态、错误信息以及一个刷新数据的函数。

参数说明

  1. key:

    • 类型:string
    • 说明:一个用于唯一标识异步数据请求的键。如果未提供,useAsyncData会自动生成一个基于文件名和行号的键。
  2. handler:

    • 类型:() => Promise<any>() => any

    说明:一个异步函数,它返回一个Promise对象,该Promise对象在解析时提供数据。这个函数是必须的,并且其返回值不能是undefined
    null,否则可能会导致请求重复。

  3. options:

    • 类型:Partial<AsyncDataOptions>

    • 说明:这是一个可选的对象,可以包含以下属性:

      • server:

        • 类型:boolean
        • 说明:默认为true,表示数据将在服务器端获取。
      • lazy:

        • 类型:boolean
        • 说明:默认为false,表示数据将在路由加载时立即获取。如果设置为true,数据将在路由导航后异步获取,不会阻塞导航。
      • immediate:

        • 类型:boolean
        • 说明:默认为true,表示在路由加载时立即触发数据获取。如果设置为false,数据获取将被延迟,直到首次访问该路由。
      • default:

        • 类型:(data: any) => any
        • 说明:一个工厂函数,用于在异步数据解析之前设置data的默认值。这在lazy: trueimmediate: false时非常有用。
      • transform:

        • 类型:(data: any) => any
        • 说明:一个函数,用于在解析handler函数的结果后修改数据。
      • pick:

        • 类型:(data: any) => any
        • 说明:一个函数,用于从handler函数的结果中挑选特定的键。
      • watch:

        • 类型:(data: any) => any
        • 说明:一个函数,用于监听响应式源,并在其变化时自动刷新数据。
      • deep:

        • 类型:boolean
        • 说明:默认为true,表示返回深层响应式对象。如果设置为false,则返回浅层响应式对象,这可能在某些情况下提高性能。

示例用法

以下是在pages/index.vue页面中使用useAsyncData的示例:


<template>
    <div>
        <div v-if="pending">加载中...</div>
        <div v-else-if="error">错误:{{ error.message }}</div>
        <div v-else>
            <ul>
                <li v-for="mountain in data" :key="mountain.id">{{ mountain.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup>
    // 使用 useAsyncData 获取数据
    const {data, pending, error, refresh} = await useAsyncData(
            'mountains', // 唯一键,用于确保数据获取的正确性
            () => $fetch('https://api.nuxtjs.dev/mountains') // 异步函数,返回数据
    )
</script>

参数解释

  1. key:一个字符串,用于标识这个数据请求的唯一键。在同一个组件中,如果有多个useAsyncData调用,每个键都应该是唯一的。
  2. handler:一个异步函数,它应该返回一个Promise,该Promise在解析时提供所需的数据。

返回值

  • data:一个响应式引用,包含异步函数解析后的数据。
  • pending:一个布尔值,表示数据是否正在加载。
  • error:一个响应式引用,如果数据加载失败,它将包含一个错误对象。
  • refresh:一个函数,可以用来重新执行异步函数,从而刷新数据。

注意事项

  • 确保useAsyncData的键在整个应用中是唯一的,以避免数据冲突。
  • 如果你的数据请求依赖于组件的响应式状态,可以使用watch选项来自动重新获取数据。

监听参数

useAsyncData
组合式函数确实允许你监听外部变量的变化,并在这些变量发生变化时重新运行异步数据获取器。下面是如何在pages/index.vue
中使用watch选项来监听page变量的变化,并相应地更新数据的一个示例。

示例代码

<template>
  <div>
    <div v-if="pending">加载中...</div>
    <div v-else-if="error">错误:{{ error.message }}</div>
    <div v-else>
      <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
      </ul>
      <!-- 假设有一个分页组件或按钮来改变页码 -->
      <button @click="page.value++">下一页</button>
    </div>
  </div>
</template>

<script setup>
    // 创建一个响应式引用来存储当前页码
    const page = ref(1)

    // 使用 useAsyncData 获取数据,并监听 page 变量的变化
    const { data: posts, pending, error, refresh } = await useAsyncData(
      'posts',
      () => $fetch('https://fakeApi.com/posts', {
        params: {
          page: page.value // 将当前页码作为参数传递给 API
        }
      }),
      {
        watch: [page] // 监听 page 变量的变化
      }
    )
</script>

解释

  1. 响应式引用page:我们使用ref创建了一个响应式引用page,用来存储当前页码。
  2. useAsyncData获取数据:我们使用useAsyncData来获取数据,并将page作为参数传递给
    API。同时,我们传递了一个包含watch选项的对象,其中指定了要监听的响应式引用page
  3. 监听page变化:当page的值发生变化时,useAsyncData会自动重新运行获取器函数,并使用新的页码值来获取数据。
  4. 返回数据:最后,我们将pagepostspendingerrorrefresh函数返回到模板中,以便在模板中访问和使用这些数据。

返回值

1. data

data属性包含异步函数返回的结果。在请求完成之前,它可能是undefined

const { data } = useAsyncData('key', async () => {
  const response = await fetch('/api/data');
  return await response.json();
});

// 在模板中使用 data
<div>{{ data ? data.someProperty : '加载中...' }}</div>

2. pending

3. refresh/execute

4. error

5. status

完整示例

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜:编程智域 前端至全栈交流与成长,阅读完整的文章:轻松掌握useAsyncData获取异步数据 | cmdragon's Blog

往期文章归档:

标签:异步,cmdragon,轻松,Blog,useAsyncData,data,函数
From: https://www.cnblogs.com/Amd794/p/18298637

相关文章

  • 轻松选型,高效开发——业务开发集市助您一臂之力
    在当今这个日新月异的时代,高效开发已成为企业保持竞争力的关键。为了满足市场对高效、灵活开发工具的迫切需求,OceanMind海睿思推出业务开发集市。这款开发工具汇集了众多丰富的、高度可定制的控件和组件,以及灵活的模板选型功能,旨在帮助企业快速响应并满足多变的客户需求。通过......
  • 异步请求技术--Ajax(教你彻底学会Ajax,关键细节,原生Ajax,应用案例详解,最易懂图文讲解!!! 建
    1.什么是Ajax1.AJAX即"AsynchronousJavascriptAndXML"(异步JavaScript和XML)2.Ajax是一种浏览器异步发起请求(指定发哪些数据),局部更新页面的技术Ajax在线3文档 重点是XHR创建XHR请求XHR响应!等1.1 一图胜千言 2.Ajax的通信原理......
  • JavaScrip中的异步编程
    最近发现身边的同学对js的异步流程不是很熟悉,在这里我就来讲一下自己对异步的了解。首先要明确JS是一门单线程语言,因为js是运行在浏览器的渲染主线程中,而渲染主线程只有一个。当我们在主线程任务中开启异步时,主线程会将该任务交给其他线程去处理,自身立即结束对该任务的执行,......
  • 《0基础》轻松学会Python——第五讲
    第五讲一、转义字符(\n,\t,\',\\,\r)    1、\n :表示换行符print('人生若只如初见,何事秋风悲画扇')print('*'*50)print('人生若只如初见,\n何事秋风悲画扇')        2、\t  :制表符,即tab键print('人生而自由,却无往不在枷锁中')print('人生而自由,却无......
  • Java异步判断线程池所有任务是否执行完成的方法
    1.使用ExecutorService和CountDownLatch的方法示例在Java中,当我们使用线程池(如ExecutorService)来执行异步任务时,常常需要知道所有任务是否都已经完成。ExecutorService接口提供了几种方式来处理这种情况,但最常用的是shutdown()和awaitTermination()方法的组合,或者使用Future和Com......
  • 异步编程秘籍:一探std::future的魔法,让代码飞起来
    ......
  • Redis中设置增量缓存,减少对数据库的交互查询;启动@Async;异步线程
    //当属于这个分支的报文传入调用processMessage方法if((newJSONObject(dataMessage).optString("documentStatus")).equals("carWeizi_redis_service")){processMessage(dataMessage);}//processMessage中先把增量数据插入数据库,同时缓存redispublic......
  • Go 1.23 的 os.CopyFS:告别第三方库,轻松复制目录
    Go1.23的os.CopyFS:告别第三方库,轻松复制目录原创K8sCat源自开发者2024年07月10日21:49美国听全文在Go1.23版本中,标准库os包引入了一个名为CopyFS的新函数,它提供了一种仅使用标准库函数即可复制目录的便捷方法。从此,开发者无需再依赖第三方库来完成这项常见任务......
  • python列表:轻松搞懂列表的声明、遍历、常见操作
    一.列表的定义数据类型list,list是python内置的一种高级数据类型。list是一种有序的集合,基于链表实现在python中应用很广泛声明方式一:l0=[]print(l0,type(l0))l1=[1,2,3.2,'abc']print(l1,type(l1))声明方式二:l2=list()#只能将可迭代类型转化为列表类型......
  • 利用SpringBoot+rabbitmq 实现邮件异步发送,保证100%投递成功
    在之前的文章中,我们详细介绍了SpringBoot整合mail实现各类邮件的自动推送服务。但是这类服务通常不稳定,当出现网络异常的时候,会导致邮件推送失败。本篇文章将介绍另一种高可靠的服务架构,实现邮件100%被投递成功。类似的短信自动发送等服务也大体相同。一、先来一张流程图......