NUXT3学习日记五（composables、$fetch和useAsyncData、useFetch，lazy，refresh）

composables

• 在 Nuxt 3 中，composables（组合式函数）是一种用于封装和复用有状态逻辑的机制。它类似于 Vue 3 中的组合式 API，允许你将相关的逻辑（如数据获取、状态管理等）提取到独立的函数中，然后在组件中进行调用。
• 这些函数可以访问和操作组件的响应式数据、生命周期钩子等，使得代码更加模块化和易于维护。

我们可以在composables文件夹中创建一个js文件，在js文件中定义我们需要的逻辑，可以在任意vue文件中进行代码的复用：

怎么使用呢？您请看以下代码截图：

 

看图可知 通过文件名使用我们上面定义的函数。

$fetch和useAsyncData

$fetch（‘url接口路径’）请求数据

在 Nuxt 3 中，$fetch 是基于 ofetch 库封装的。ofetch 是一个轻量级的 Fetch API 的封装，提供了一些额外的功能，比如请求和响应的处理、自动序列化 JSON 数据、支持 AbortController 等。

主要特点

• 简化请求：$fetch 使得发送 HTTP 请求变得更加简单，尤其是在处理 JSON 数据时。
• 错误处理：它可以自动处理 HTTP 错误，并抛出异常，方便开发者进行错误捕获。
• 支持中间件：可以通过配置来添加请求和响应的中间件。
• 支持 AbortController：可以轻松地取消请求。

const response = await $fetch('https://api.example.com/data', {method: 'GET', // 请求方法headers: {'Authorization': 'Bearer token' // 添加请求头}
})

直接向以上方式写的话，会在服务端执行一次，在客户端执行一次，如果是请求数据库的就会有问题了，所以我们需要加上限定条件的代码：

 if (import.meta.server) {const response = await $fetch('https://api.example.com/data', {method: 'GET', // 请求方法headers: {'Authorization': 'Bearer token' // 添加请求头}})} 

但是呢，这还不是官方推荐的。所以官方推荐了这种方法useAsyncData，注意useAsyncData是异步的！！！useAsyncData获得的数据会自动变成响应式的

//useAsyncData在服务端执行时，只会执行一次
let res = await useAsyncData('test',()=>{return $fetch('http://localhost:8080/user')
})

useAsyncData 的第一个参数是一个键（在这个例子中是 'test'），它用于缓存数据。如果你在同一个组件中多次调用 useAsyncData，并且使用相同的键，它将返回缓存的数据，而不会重新发起请求。这对于提高性能和减少不必要的请求非常有用。

key需要唯一，如果不唯一，会导致数据不一致。

useFetch，lazy，refresh

useFetch，refresh

// useFetch在客户端和服务端都执行
//useFetch实际是useAsyncData+$Fetch的语法糖
//useFetch里面会自动维护一个key，返回的数据和useAsyncData是一致的
const {refresh} = await useFetch('http://localhost:8080/user')
//refresh只在服务端执行一次
refresh()

这个useFetchuseAsyncData+$Fetch的语法糖，useFetch里面会自动维护一个key，返回的数据和useAsyncData是一致的

另外，这个refresh是用来刷新token的，也是只在服务端执行。

lazy

<template><div><p>首页</p><div v-if="status === 'pending'">正在请求</div><div v-else>请求成功</div></div>
</template>const {refresh,status} = await useFetch('http://localhost:8080/user',{//先渲染标签lazy:true
})
//refresh只在服务端执行一次
refresh()

这个status一开始是pending，请求完成变成success，所以在页面一开始显示“正在请求”，完成之后显示“请求成功”。