Nuxt3封装网络请求 useFetch & $fetch

前言：

刚接触、搭建Nuxt3项目的过程还是有点懵的，有种摸石头过河的感觉，对于网络请求这块，与之前的Vue3项目有所区别，在Vue项目通常使用axios这个库进行网络请求，但在Nuxt项目并不推荐，因为有内置 fetch 相关...接下来一起学习一下Nuxt3数据请求的点点滴滴吧~

文档：

数据获取 · 快速入门 Nuxt

关键：

• useFetch 是在组件设置函数中处理数据获取的最简单方法。
• $fetch 可以根据用户交互进行网络请求。
• useAsyncData 结合 $fetch，提供了更精细的控制。

讲解：

useAsyncData：

• 提供了一种在SSR友好的组合式中访问异步解析数据的方式
• 注意，setup期间，这里结合了$fetch，并且设置了一个key，一个唯一的键，用于确保数据获取可以在请求中正确去重

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

• 当 CMS 或第三方提供自己的查询层时。在这种情况下，您可以使用 useAsyncData 来封装您的调用，并仍然保持组合函数提供的好处。 

$fetch:

• Nuxt使用 ofetch 来全局暴露`$fetch`辅助函数，用于在Vue应用程序或API路由中进行HTTP请求 
• 源码：nuxt/packages/nuxt/src/app/entry.ts at main · nuxt/nuxt · GitHub
• $fetch是在Nuxt中进行HTTP调用的首选方式，而不是为Nuxt 2设计的