（以前社内ブログに投稿していた記事の再掲です）
はじめに
Nuxt2まではaxios-moduleなどを使用してAPIを叩くプロジェクトが多い印象だったのですが、
Nuxt3からはaxiosを使用しなくてもAPIが叩けるようなので、どうやるのか調査してみました。
結論
useFetch()を使います。
axiosを使わずとも、とても簡単にAPIを呼び出せちゃいます。
以下で詳しい使い方を解説していきます。
useFetchでデータを取得する
まずNuxt3では、
Nuxt3が既に用意してくれている機能であるuseFetchを使用することでAPIを呼び出し、GETすることが出来ます。
例えば、以下のような感じで使えばデータを取ってこれます。
<script setup>
...
const { data } = await useFetch('/api/test');
...
</script>
useFetchの引数で /api/test のような値を指定するだけで、欲しいAPIを叩いてくれます。
このとき、APIの戻り値であるdataはref()で包まれているのでリアクティブに使えます。
dataに任意の変数名を付けたい場合は、{ data: [変数名] }のように書くと任意の変数名を使用できます。
<template>
...
// template内で使用するときはvalue不要
{{response.userName}}
...
</template>
<script setup>
...
const { data: response } = await useFetch('...');
// script内で使用するときは.valueが必要
console.log(`${response.value.userName}`)
...
</script>
useFetchでデータを送信する
データを送信するためには、useFetchにoptionsを付けることで対応します。
methodにはPOSTの他にもPUT , PATCHを指定できます。
(methodオプションで指定がなければGET)
bodyには送信したいJSONデータを指定することで、データを送れます。
const { data } = await useFetch('url', {
method: 'POST',
body: postData,
});
useFetchとuseAsyncDataの違いについて
useFetchについて調べると、必ずuseAsyncDataという単語がちらつきます。
ざっくり理解する分には、この二つはだいたい同じと思ってもらって構いませんが、
厳密には全然違うので簡単に解説しようと思います。
そもそもuseFetchとは、$fetchの利用に特化したuseAsyncDataのラッパー関数です。
ここでいう$fetchとはohmyfetchのことで、これは様々な環境で使用できるFetchAPIです。
ohmyfetchはとりあえずaxiosのようなものだと考えてください。
Nuxt3内ではohmyfetchがグローバルに使用できるため、そのオプションを使用することが出来ます。
使い方は以下のような感じです。
const { data } = await useAsyncData('key', () => $fetch('url'), options{...})
const { data } = await useFetch('url', options{...})
useAsyncDataの第一引数で使っているkeyとは、リクエスト間で重複を排除するための一意の文字列です。
値としてはなんでもいいです。呼び出すAPIの簡略化された名前とかが多いんですかね・・・
例えば、api/count.tsを呼び出すのなら、countみたいな感じですかね。
プロジェクトでのコーディングルールに合わせてもらえたらと思います。
そして、さらに挙げる以下の二つは同義で、
useAsyncDataの第二引数が() => $fetchになるのであれば基本的にuseFetchを使用すれば問題ないです。
const { data } = await useAsyncData('count', () => $fetch('url'))
const { data } = await useFetch('url')
ちなみにoptionsには以下のようなオプションを指定できます。
lazy ： 非同期処理が終了するまでルーティングを待機するか（デフォルトはfalse）
default ： lazy: trueの場合に初期値を返す関数を指定する
server ： サーバー上のデータをフェッチするかどうか（デフォルトはtrue）
transform ： 非同期処理終了後に結果を変更するために使用する関数を指定する
pick ： 取得データがオブジェクトの場合、配列に指定したキーのみデータを取得する
watch ： リアクティブソースを監視して自動更新する
initialCache ： falseに設定すると、初期フェッチのペイロードキャッシュをスキップする（デフォルトはtrue）
useFetchでは上記に加え、以下に書く$fetchのオプションも使用できます。
method ： HTTPリクエストを指定する（デフォルトはGET）
params ： 追加クエリを指定
baseURL ： BaseURLを指定
body ： 送信するjsonデータ
戻り値などの詳細は公式のページを参考にしてください。
useLazyFetchとかuseLazyAsyncDataもいる
useLazyFetch , useLazyAsyncDataという、とても似た名前の機能もNuxt3は用意してくれています。
これらもついでに比較しておきます。
useFetch,useAsyncDataと、useLazyFetch,useLazyAsyncDataの違いは、
データ取得時に画面描画をブロックするかしないかという点です。
useFetch,useAsyncDataはデータ取得が完了するまでページ遷移を完了させませんが、
useLazyFetch,useLazyAsyncDataはデータ取得状況と関係なくページ遷移を完了させます。
ちなみにuseFetch,useAsyncDataでもlazyオプションをtrueにすることで同様の記述が可能です。
以上、Nuxt3ではaxiosを使わなくともuseFetchを使用して、簡単にAPIを呼び出せることがわかりました！
参考
https://v3.nuxtjs.org/api/composables/use-fetch
https://github.com/unjs/ohmyfetch
https://serversideup.net/post-put-and-patch-requests-with-nuxt-3/