[羊腿]Nuxt3初识(四)

承接上文初识Nuxt(三)

现在我们学习了页面布局和结构入口： app.vue，路由： pages，组件： components，整体布局：layouts 下面接着我们要获取数据

data fetching

获取数据里 Nuxt3 提供了4个api **useAsyncData, useLazyAsyncData, useFetch, useLazyFetch, **

这四个api在组件中只能在setup中使用

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 }
  // options.lazy,是否在加载路由后才请求该异步方法，默认为false
  // options.server,是否在服务端请求数据，默认为true
  // options.default，异步请求前设置数据data默认值的工厂函数（对lazy:true选项特别有用）
  // options.transform，更改fn返回结果的函数
  // options.pick，只从数组中指定的key进行缓存
)

1. option里每个字段的用法 自己练下demo才有体会
2. 有些时候， 我们可以通过pending的状态来渲染不同的组件
3. pick字段视情况使用 比如v-once的场景

useLazyAsyncData

相当于 useAsyncData options里加上 lazy: true

useFetch

使用useFetch也同样可以获取到任意的URL资源。该方法实际上是对useAsyncData和$fetchh的封装，提供了一个更便捷的封装方法。（它会根据URL和fetch参数自动生成一个key，同时推断出API的响应类型）$fetch参考配置ohmyfetch

useLazyFetch

相当于 useLazyFetch options里加上 lazy: true

server目录

练习前先了解下server 目录

服务器目录用于为 Nuxt 应用程序创建任何后端逻辑。它支持 HMR 和强大的功能。

server/该目录包含项目的 API 端点和服务器中间件。

Nuxt 将自动读取/server/api目录中的任何文件，以创建 API 端点。

每个文件都应导出一个处理 API 请求的默认函数。它可以直接返回承诺或 JSON 数据（或使用 ）。res.end()

🌰： 创建`server/api/hello.ts

export default () => 'hello world'

http://localhost:3000/api/hello 可以看到 hello world

server下的文件也是支持promise的

练习一下

index.vue

<template>
    <div>
        <span>{{data.counter}}</div>
    </div>
</template>
<script setup>
const {data} = await useAsyncData('counter', () => $fetch('/api/counter'))
// const {data} = await useFetch('/api/counter') 也可以用useFetch
<script>

server/api/counter.ts

let counter = 0

export default () => {
  counter++

  return {
    counter
  }
}

来试下拉取掘金首页文章列表的数据

server/api/juejin-list.ts

import request from 'request-promise'

export default async () => {
  const r = await request.post(
    'https://api.juejin.cn/recommend_api/v1/article/recommend_all_feed',
    { json: true }
  )

  return r.data
}

修改下index.vue

<template>
    <div>
        <button @click="getJuejinList">拉去数据</button>
        <div v-for="l in list">{{l}}</div>
    </div>
</template>
<script setup>
import {reactive} from 'vue'
const list = reactive({})
async function getJuejinList() {
    const {data} = await useFetch('/api/juejin-list')
    list.push(...data.value)
}

getJuejinList()
</script>

看下页面展示 是否拉取成功

点击按钮 也是可以的

总结

1. nuxt3 自己封装了fetch请求， 暂时使用起来还行， 不知道替换成axios 怎么能做到options选项哪些功能
2. 获取数据还是听顺畅的