$fetch
Nuxt использует ofetch для предоставления глобально хелпера $fetch для выполнения HTTP-запросов.
Nuxt использует ofetch для предоставления глобально хелпера $fetch для выполнения HTTP-запросов в вашем приложении Vue или маршрутах API.
Во время серверного рендеринга вызов
$fetch для получения данных из ваших внутренних маршрутов API будет непосредственно вызывать соответствующую функцию (эмулируя запрос), экономя дополнительный вызов API.Использование
$fetch в компонентах без обертывания его с помощью useAsyncData приводит к тому, что данные извлекаются дважды: сначала на сервере, а затем снова на клиенте во время гидратации, потому что $fetch не передает состояние с сервера на клиент. Таким образом, извлечение будет выполнено на обеих сторонах, потому что клиент должен повторно получить данные.Для предотвращения двойного извлечения данных при получении данных компонента мы рекомендуем использовать useFetch или useAsyncData + $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>
Вы можете использовать $fetch в любых методах, которые выполняются только на клиенте.
pages/contact.vue
<script setup lang="ts">
function contactForm() {
$fetch('/api/contact', {
method: 'POST',
body: { hello: 'world '}
})
}
</script>
<template>
<button @click="contactForm">Contact</button>
</template>
$fetch является предпочтительным способом выполнения HTTP-запросов в Nuxt, в отличие от @nuxt/http и @nuxtjs/axios, которые были созданы для Nuxt 2.Если вы используете
$fetch для вызова (внешнего) HTTPS URL-адреса с самоподписанным сертификатом в разработке, вам необходимо установить NODE_TLS_REJECT_UNAUTHORIZED=0 в своей среде.