轻松掌握useAsyncData获取异步数据


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
  • 组件函数
  • 数据获取
  • 响应式对象
  • 服务端渲染

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

在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的示例:

html 复制代码
<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

往期文章归档:

相关推荐
Amd79414 小时前
Nuxt.js 应用中的 webpack:compile 事件钩子
webpack·自定义·编译·nuxt.js·构建·钩子·逻辑
Amd7942 天前
Nuxt.js 应用中的 webpack:configResolved事件钩子
webpack·自定义·开发·配置·nuxt.js·构建·钩子
枣把儿3 天前
Nuxt3全栈开发博客 · 配置篇
前端·后端·nuxt.js
Amd7943 天前
Nuxt.js 应用中的 webpackConfigs 事件钩子
webpack·配置·模块·nuxt.js·插件·输出·钩子
努力挣钱的小鑫1 个月前
Nuxt3 SSR 服务端渲染部署 PM2 全流程(Nest.js 同理)
开发语言·javascript·ecmascript·ssr·ssr部署
JXDN1 个月前
Nuxt.js代码风格配置
vue.js·nuxt.js
Amd7941 个月前
Nuxt.js 应用中的 modules:done 事件钩子详解
生命周期·前端开发·nuxt.js·钩子函数·代码示例·应用初始化·modules:done
Amd7941 个月前
Nuxt.js 应用中的 modules:before 事件钩子详解
生命周期·配置·模块·nuxt.js·初始化·钩子·环境设置
熊猫在哪1 个月前
nuxt3脚手架安装报错解决方法
前端·javascript·nuxt.js
Amd7941 个月前
Nuxt.js 应用中的 restart 事件钩子详解
nuxt.js·实例方法·开发技巧·普通重启·硬重启·应用重启·重启方法