Nuxt3：“useFetch”和“useAsyncData”有什么区别

Question

我一直在尝试了解这两种可堆肥之间的区别，以便我可以在我的应用程序中以正确的方式使用它们 根据文档

简而言之，useFetch 接收 URL 并获取该数据，而 useAsyncData 可能有更复杂的逻辑。 useFetch(url) 几乎 相当于 useAsyncData(url, () => $fetch(url)) - 它是开发人员 体验最常见用例的糖。

它说

useAsyncData

可能有更复杂的逻辑，但这是什么意思？

这是我与两个可组合项一起使用的测试代码，但我没有注意到任何差异

<template>

  <div v-show="pendingFetch" class="text-rose-700">LOADING useFetch ...</div>
  <pre>{{ productsUseFetch }}</pre>

 <h1>=====================================================</h1>

  <div v-show="pendingAsyncData" class="text-green-500">
    LOADING asyncData ...
  </div>
  <pre>{{ productsUseAsyncData }}</pre>

</template>

<script setup>
const { data: productsUseFetch, pendingFetch, errorFetch } = await useFetch(
  "https://fakestoreapi.com/products"
);

const {
  data: productsUseAsyncData,
  pendingAsyncData,
  errorAsyncData,
} = await useAsyncData("testFetch", () =>
  $fetch("https://fakestoreapi.com/products")
);
</script>

Answer 1

useFetch

的参数只是一个要从中获取的URL。

在

useAsyncData

中，您传入一个处理函数，该函数甚至可以将

nuxtApp

作为参数，并在执行您需要的操作后返回异步数据。我现在没有任何现实世界的例子，但在简单参数或潜在复杂函数之间进行选择对我来说听起来是有区别的。

您的测试代码实际上就是文档所说的：

useFetch(url) is nearly equivalent to useAsyncData(url, () => $fetch(url))

Answer 2

useFetch 和 useAsyncData 之间的区别在于，useAsyncData 可以使用另一个数据获取可组合项，您希望使其成为服务器端友好的，例如 useFetch 接受用于获取数据的 url 供使用Fetch

1. useFetch(ur) 用于useAsyncData
2. useAsyncData(()=>$fetch(url))
3. useAsyncData(()=>useQuery(query,anothe options)) 如果您熟悉 Graphql apollo 客户端

更多