Nuxt3 useAsyncData vs useFetch

nuxt 为我们提供了 useFetch 和 useAsyncData 我们应该用哪个呢？

如何在数据变化后自动重新加载数据？

在使用 useFetch 时，需要在数据变化后自动请求数据的时候，我们不应该在参数中进行解包

html

<script lang="ts" setup>
  const page = ref(1)
  const { data } = await useFetch("/api/result", {
    query: {
      page: page.value,
    },
    method: "POST",
  })
</script>

<template>
  <button @click="page++">更改分页</button>
</template>

上面这段代码相当于下面这段代码，在 page 变化时不会自动进行数据的重新加载。

html

<script lang="ts" setup>
  const page = ref(1)
  const { data } = await useFetch("/api/result", {
    query: {
      page: 1,
    },
    method: "POST",
  })
</script>

<template>
  <button @click="page++">更改分页</button>
</template>

我们我们如果需要在 page 变化时重新调用接口，我们不需要对 page 进行解包

html

<script lang="ts" setup>
  const page = ref(1)
  const { data } = await useFetch("/api/result", {
    query: {
      page: page,
    },
    method: "POST",
  })
</script>

<template>
  <button @click="page++">更改分页</button>
</template>

下面两段代码实现的效果是一致的，会在在 page 变化时重新请求数据

const page = ref(1)
const { data } = await useFetch("/api/result", {
    query: {
        page,
    },
    method: "POST",
})

const page = ref(1)
const { data } = await useAsyncData("result", async () =>
    $fetch(
        "/api/result",
        {
            query: {
                page: page.value,
            },
            method: "POST",
        },
        {
            watch: [page],
        }
    )
)

useFetch 近似等同于 useAsyncData + `$fetch

什么时候会用到 useAsyncData？

我们需要一次请求多个数据，比如我们需要请求用户信息和文章列表，我们可以使用 useAsyncData 来实现

const { userInfo } = await useAsyncData("userInfo", async () => {
    const [user, articles] = await Promise.all([$fetch("/api/user"), $fetch("/api/articles")])

    return {
        user,
        articles,
    }
})

或者我们会有一些其他的第三方提供好的接口和方法，我们也可以使用 useAsyncData 来实现

// 这里模拟第三方提供好的请求方法
import { fetchData } from "other-api"

const { data } = await useAsyncData("otherData", async () => {
    const result = await fetchData()
    return result
})

useAsyncData 和 useFetch 对返回值的处理

有时我们需要的数据只是接口返回值的一部分，那么我们可以使用 transform 属性来处理返回值

const { data } = await useAsyncData("result", () => $fetch("/api/result"), {
    transform: (data) => {
    // 在这里处理返回值
        return {
            id: data.id,
            name: data.name,
        }
    },
})

如果返回值是多个数据，也可以使用 transform 函数来处理

const { userInfo } = await useAsyncData(
    "userInfo",
    async () => {
        const [user, articles] = await Promise.all([$fetch("/api/user"), $fetch("/api/articles")])

        return {
            user,
            articles,
        }
    },
    {
        transform: (data) => {
            return {
                user: {
                    username: data.user.username,
                    email: data.user.email,
                },
                articles: data.articles.map(article => ({
                    title: article.title,
                    content: article.content,
                })),
            }
        },
    }
)

结论

$fetch 没有响应性
useAsyncData 可以配置 watch 属性在某些字段变更时具备响应性
useFetch 可以自动扫描方法内的响应式数据，并在数据变更时重新加载数据

我们一般情况下使用 useFetch，useFetch 为我们提供的自动重新加载数据会有更好的 DX，我们不在需要手动处理什么时候重新加载数据，只要保证参数中的数据是响应式的即可；如果你有特殊的情况，可以使用 useAsyncData 自己处理一些数据，而且结合 useAsyncData 提供的一些属性比如 watch 也可以尽可能的更加友好的处理一些数据的自动重新加载；$fetch 来自于 ofetch 它更像是 axios 之类 HTTP 请求库，需要手动对每次请求做出判断。

如果实在服务端使用，那么就只能使用 $fetch

Nuxt3 useAsyncData vs useFetch

如何在数据变化后自动重新加载数据？

什么时候会用到 useAsyncData？

useAsyncData 和 useFetch 对返回值的处理

结论

评论区