Nuxt3-学习之路 13,数据获取-useFetch

3,389

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

Nuxt3-学习之路 13, 数据获取-useFetch

引言

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

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

数据获取

在上一篇的学习中,我们知道 useAsyncData 这个 API 的调用和使用。

这里我们继续用这个 API 来调用一下自己目录下的东西,在 server/api 目录下,创建一个 testReq.ts 的文件,内容如下。

const testReq = {
  code: 200,
  message: '请求成功',
  result: {
    testArr: [
      { id: 1, title: '标题1' },
      { id: 2, title: '标题2' }
    ]
  }
}

export default function () {
  return testReq
}

pages/index.vue 这个文件夹下进行自动引入和使用,这里要注意写法。

image.png

image.png

可以看到可以成功的调取数据,这里需要注意 data 是一个 Vue3 里面的 ref 值。

我们对返回的结果进行简单的修改,让其成功在页面中进行渲染使用。

image.png

image.png

useFetch

通过上面,我们可以看到 useAsyncData 这个 API 方法是自动注册引入。

但是会好奇,使用的时候,为什么要加个 $fetch,能不能去掉呢?

这里当然是可以的,这里有个新的 APIuseFetch,就是对 useAsyncData 进行封装。而且使用起来更简单。

function useFetch(
  url: string,
  options?: UseFetchOptions
)

可以看到这里相较于 useAsyncData 省略了一个方法 key,其实 useFetch 会自动生成一个不重复的 key

  • url 就是我们请求数据的地址
  • options 就是相关的配置项

我们通过使用 useFetch 再对我们上面的数据进行一次获取。

image.png

可以看到数据获取的结果和页面显示都是一样的。

所以我们平时可以直接使用 useFetch 这个封装好的 API

总结

学习了 Nuxt3 的 数据获取 的 useFetch 方法,它是对 useAsyncData 的一个封装,使用起来更加的便捷。