$fetch
Nuxtはofetchを使用して、HTTPリクエストを行うための$fetchヘルパーをグローバルに公開します。
Nuxtはofetchを使用して、VueアプリまたはAPIルート内でHTTPリクエストを行うための$fetchヘルパーをグローバルに公開します。
サーバーサイドレンダリング中に、内部APIルートを取得するために
$fetchを呼び出すと、関連する関数が直接呼び出され（リクエストをエミュレートします）、**追加のAPI呼び出しが節約されます**。useAsyncDataでラップせずにコンポーネントで$fetchを使用すると、データが2回フェッチされます。最初はサーバーで、次にハイドレーション中にクライアントサイドで再びフェッチされます。これは、$fetchがサーバーからクライアントに状態を転送しないためです。したがって、クライアントはデータを再度取得する必要があるため、フェッチは両側で実行されます。コンポーネントデータのフェッチ時にデータの二重フェッチを防ぐために、useFetchまたはuseAsyncData + $fetchを使用することをお勧めします。
app.vue
<script setup lang="ts">
// During SSR data is fetched twice, once on the server and once on the client.
const dataTwice = await $fetch('/api/item')
// During SSR data is fetched only on the server side and transferred to the client.
const { data } = await useAsyncData('item', () => $fetch('/api/item'))
// You can also useFetch as shortcut of 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>
開発環境で自己署名証明書を使用して（外部）HTTPS URLを呼び出すために
$fetchを使用する場合は、環境でNODE_TLS_REJECT_UNAUTHORIZED=0を設定する必要があります。