Ste*_*eve 2 laravel fetch-api nuxt.js nuxtjs3
我将 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请求和$fetchforPOST和PUT请求？
我很困惑，因为我看过很多关于POST使用 requestsuseFetch和GETrequests that use的教程$fetch。
它是否更容易用于useFetch所有请求，因为它有很多$fetch没有的参数、选项和返回值，并且还因为它避免了在组件中两次获取数据的风险？
无论如何， 和 的错误处理useFetch是否$fetch相同useAsyncData？我可以在所有 3 个 API 中使用与 Fetch API 相同的错误处理吗？
useFetchuseFetch根据文档推荐的使用方式是在组件设置函数、插件和路由中间件中。这是一种处理数据获取的直接方法，无需重新获取或重复的网络调用，并且它是useAsyncData+的快捷方式$fetch。
// useAsyncData\nconst { data } = await useAsyncData(\'item\', () => $fetch(\'/api/item\'))\n\n// useFetch \xe2\x9c\x85 Cleaner and easy to read.\nconst { data } = await useFetch(\'/api/item\')\n\n\n\n
useAsyncData是一个可组合项，旨在在设置函数、插件或路由中间件中直接调用。它返回反应式可组合项并处理向 Nuxt 有效负载添加响应，以便它们可以从服务器传递到客户端，而无需在页面水合时重新获取客户端的数据。
\n\n\n\n
useFetch是一个可组合项，旨在在设置函数、插件或路由中间件中直接调用。它返回反应式可组合项并处理向 Nuxt 有效负载添加响应，以便它们可以从服务器传递到客户端，而无需在页面水合时重新获取客户端的数据。
$fetch？根据文档，建议使用$fetchAPI 的方式是将数据发布到事件处理程序。
例如
\n<script setup lang="ts">\nfunction contactForm() {\n $fetch(\'/api/contact\', {\n method: \'POST\',\n body: { hello: \'world \'}\n })\n}\n</script>\n\n<template>\n <button @click="contactForm">Contact</button>\n</template>您还可以$fetch在服务器/服务器路由上使用 API。\ne.g.
export default defineEventHandler(async () => {\n const sendEmail = await $fetch(\'https//send-email.com/api/send-email\')\n return sendEmail\n})这是基于 nuxt 文档的这些可组合项/API 的推荐用法。但是，就我个人的使用而言，useFetch用于发布数据仍然可以正常工作。只是不推荐而已。
对于错误处理，根据文档，它应该相同，因为它们返回相同的值，例如数据、挂起、刷新/执行和状态。
\n\n\n希望有帮助。
\n| 归档时间： |
|
| 查看次数： |
4658 次 |
| 最近记录： |