Nuxt3 中文课程《实战全栈开发简书》限时优惠

$fetch

Nuxt使用ofetch来全局暴露`$fetch`辅助函数,用于在Vue应用程序或API路由中进行HTTP请求。

Nuxt使用ofetch来全局暴露$fetch辅助函数,用于在Vue应用程序或API路由中进行HTTP请求。

在服务器端渲染期间,调用$fetch来获取内部API路由将直接调用相关函数(模拟请求),节省了额外的API调用
在组件中使用$fetch而不使用useAsyncData进行包装会导致数据被获取两次:首先在服务器端获取,然后在客户端进行混合渲染期间再次获取,因为$fetch不会将状态从服务器传递到客户端。因此,获取将在两端执行,因为客户端需要再次获取数据。

我们建议在获取组件数据时使用useFetchuseAsyncData + $fetch来防止重复获取数据。

app.vue
<script setup lang="ts">
// 在SSR中数据将被获取两次,一次在服务器端,一次在客户端。
const dataTwice = await $fetch('/api/item')

// 在SSR中,数据仅在服务器端获取并传递到客户端。
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// 你也可以使用useFetch作为useAsyncData + $fetch的快捷方式
const { data } = await useFetch('/api/item')
</script>
Read more in Docs > Getting Started > Data Fetching.

你可以在只在客户端执行的任何方法中使用$fetch

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

<template>
  <button @click="contactForm">联系我们</button>
</template>
$fetch是在Nuxt中进行HTTP调用的首选方式,而不是为Nuxt 2设计的@nuxt/http@nuxtjs/axios