一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

Nuxt3-学习之路 12，数据获取-useAsyncData

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的乱七八糟的 知识点。

数据获取

异步数据的请求和获取，在我们一个项目中会大量进行。而 Nuxt3 又提供了哪些方便快速的异步数据获取的 API 呢，这里学习一下。

首先创建一个默认的数据目录，用于与服务端交互。

| server/
--| api/
| app.vue

api 目录下的文件名，会被 Nuxt3 自动注册。

useAsyncData

首先是 useAsyncData，算是数据获取的基础的 API，可以学习下如何使用

传入参数
```
useAsyncData(key,handler,options)
```
- key： string 类型的唯一键，这个值可以任意取，只要不重复即可
- handler ：
- options：放置一些配置参数
options 配置项
```
type AsyncDataOptions = {
  server?: boolean
  lazy?: boolean
  default?: () => DataT
  transform?: (input: DataT) => DataT
  pick?: string[]
  watch?: WatchSource[]
  initialCache?: boolean
}
```
- server：是否让服务端渲染，把数据弄好给你，默认是开启为 true
- lazy：加载路由时，懒解析 async 函数，就是懒请求。默认 false
- pink：相当于是一个数组的map方法
返回参数
```
type DataT = {
  data: Ref<DataT>  // 
  pending: Ref<boolean>
  refresh: () => Promise<void>
  error: Ref<any>
}
```
- data：返回一个 ref 的数据值
- pending：当前的一个状态
- refresh：是否刷新数据
- error：请求失败错误信息

进行请求

这里在根路由，pages/index.vue 里面进行请求。这里使用官网给的请求方式，来查看下结果

const { data, pending, error, refresh } = useAsyncData('mountains', () => $fetch('https://api.nuxtjs.dev/mountains'))

console.log(data.value, 'data')

因为已经说了 data 是一个 ref 类型的值，所以需要 .value 的形式来获取值。

可以在控制台中清楚的看到，成功的获取到了数据。

后续我们可以将数据回显到页面即可。

总结

学习了 Nuxt3 的数据获取的基础 API 的 useAsyncData 的简单使用

Nuxt3-学习之路 12，数据获取-useAsyncData

Nuxt3-学习之路 12， 数据获取-useAsyncData

引言

数据获取

useAsyncData

进行请求

总结

Nuxt3-学习之路 12，数据获取-useAsyncData