在 Nuxt 3 中使用 $fetch、useAsyncData 或 useFetch 来处理 GET 和 POST 请求？

Question

我正在使用 Nuxt 3 和 Laravel API 后端，并试图找出哪个可组合的

useAsyncData

或

useFetch

，或者只是

$fetch

我应该用于 CRUD 和身份验证中的不同 API 请求。

文档说：

useFetch 是在组件设置函数中处理数据获取的最直接的方法。另一方面，当想要基于用户交互发出网络请求时，$fetch 几乎总是正确的处理程序。

但是，在组件中使用 $fetch 而不用 useAsyncData 包装它会导致两次获取数据：首先在服务器上，然后在水合作用期间再次在客户端上，因为 $fetch 不会将状态从服务器传输到客户端。因此，由于客户端必须再次获取数据，因此双方都会执行 fetch。我们建议在获取组件数据时使用 useFetch 或 useAsyncData + $fetch 来防止双重数据获取。

您可以将 $fetch 用于仅在客户端执行的任何方法。

我在文档中看到的

POST

请求的唯一示例使用

$fetch

。几乎所有其他示例都是使用

GET

的

useFetch

请求。

这是否意味着

useFetch

通常应用于

GET

请求，而

$fetch

应用于

POST

和

PUT

请求？

我很困惑，因为我看过很多使用

POST

的

useFetch

请求和使用

GET

的

$fetch

请求的教程。

是否对所有请求使用

useFetch

更容易，因为它具有大量

$fetch

没有的参数、选项和返回值，并且还避免了在组件中两次获取数据的风险？

无论如何，

useFetch

、

$fetch

和

useAsyncData

的错误处理是否相同？我可以在所有 3 个中使用与 Fetch API 相同的错误处理吗？

Answer 1

何时使用

useFetch

基于

文档

推荐使用useFetch的方式是在组件设置函数、插件和路由中间件中。这是一种处理数据获取的直接方法，无需重新获取或重复的网络调用，它是

useAsyncData

+

$fetch

的快捷方式。

// useAsyncData
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// useFetch ✅ Cleaner and easy to read.
const { data } = await useFetch('/api/item')

useAsyncData

是一个可组合项，可以在设置中直接调用 函数、插件或路由中间件。它返回反应式可组合项 并处理向 Nuxt 有效负载添加响应，以便它们可以被传递 从服务器到客户端，无需在客户端重新获取数据 页面水合。

useAsyncData

文档

useFetch

是一个可组合项，可以在设置中直接调用 函数、插件或路由中间件。它返回反应式可组合项 并处理向 Nuxt 有效负载添加响应，以便它们可以被传递 从服务器到客户端，无需在客户端重新获取数据 页面水合。

useFetch

文档

那么，什么时候使用

$fetch

？

根据 文档 使用

$fetch

API 的推荐方法是将数据发布到事件处理程序。

例如

<script setup lang="ts">
function contactForm() {
  $fetch('/api/contact', {
    method: 'POST',
    body: { hello: 'world '}
  })
}
</script>

<template>
  <button @click="contactForm">Contact</button>
</template>

您还可以在服务器/服务器路由上使用

$fetch

API。 例如

export default defineEventHandler(() => {
    const sendEmail = $fetch('https//send-email.com/api/send-email')
    return sendEmail
})

这是基于 nuxt 文档的这些可组合项/API 的推荐用法。但是，就我个人的使用而言，使用

useFetch

来发布数据仍然可以正常工作。只是不推荐。

希望有帮助。