前言

Nuxt 提供了 useFetch, useLazyFetch, useAsyncData 和 useLazyAsyncData 方法来处理数据获取。

注意：这几个方法只能在setup和生命周期钩子中调用。 这里应该是在SSR渲染过程中就已经获取数据，所以对方法的调用时期有严格的要求。

useAsyncData

文档说明

const {
  data: Ref<DataT>,
  pending: Ref<boolean>,
  refresh: (force?: boolean) => Promise<void>,
  error?: any
} = useAsyncData(
  key: string,
  fn: () => Object,
  options?: { lazy: boolean, server: boolean }
)

该方法提供了以下几个配置项：

key: 给fetch请求设置一个唯一的关键字
fn 返回数值的异步函数
options:
- lazy: 路由加载后发起请求，默认false
- default: 给返回的data设置默认值，需要与lazy:true搭配使用
- server: 是否在服务端请求数据，默认true
- transform: 更改返回值结构
- pick: 从结果中拾取关键字段

useAsyncData 返回包含下面属性的对象

data: 异步函数的返回值
pending: 表示数据是否获取的状态
refresh: 强制刷新data的函数
error: 数据获取失败返回的err对象

示例

构建如下目录结构，server目录下的目录加文件名构成接口路由。

server/api/hello.ts内容

export default () => 'Hello World'

pages/index.vue内容

<template>
    <div>
        {{data}}
    </div>
</template>

<script setup>
const {data} = useAsyncData('hello world', () => $fetch('/api/hello'), {})
console.log('data:', data)
</script>

注意：因为Nuxt3还在Beta阶段，热更新存在一些问题，新建目录后需重新启动应用生效。 $fetch接收methods等参数设置，详情见ohmyfetch。

useLazyAsyncData

useAsyncData的lazy设为true

useFetch

该方法是对useAsyncDate和$fetch的上层封装，示例使用useFetch可以简化为

const {data} = await useFetch('/api/hello')

useLazyFetch

useFetch方法配置了lazy

实践案例

使用 async setup

Nuxt3需要多个异步请求时，使用Promise.all封装起来，写在async setup()或者使用<script setup>中,官方推荐使用第二种形式。

Nuxt3 获取数据

前言