Nuxt3ではaxiosは使わずuseFetchらしい

（以前社内ブログに投稿していた記事の再掲です）

# **はじめに**

Nuxt2まではaxios-moduleなどを使用してAPIを叩くプロジェクトが多い印象だったのですが、

Nuxt3からはaxiosを使用しなくてもAPIが叩けるようなので、どうやるのか調査してみました。

# **結論**

**useFetch()を使います。**

axiosを使わずとも、とても簡単にAPIを呼び出せちゃいます。
以下で詳しい使い方を解説していきます。

### **useFetchでデータを取得する**

まずNuxt3では、
Nuxt3が既に用意してくれている機能であるuseFetchを使用することでAPIを呼び出し、GETすることが出来ます。

例えば、以下のような感じで使えばデータを取ってこれます。

```sample.vue
<script setup>
...
const { data } = await useFetch('/api/test');
...
</script>
```

useFetchの引数で /api/test のような値を指定するだけで、欲しいAPIを叩いてくれます。

このとき、APIの戻り値であるdataはref()で包まれているのでリアクティブに使えます。

dataに任意の変数名を付けたい場合は、`{ data: [変数名] }`のように書くと任意の変数名を使用できます。

```sample.vue
<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データを指定することで、データを送れます。

```ts
const { data } = await useFetch('url', {
  method: 'POST',
  body: postData,
});
```

# **useFetchとuseAsyncDataの違いについて**

useFetchについて調べると、必ずuseAsyncDataという単語がちらつきます。

ざっくり理解する分には、この二つはだいたい同じと思ってもらって構いませんが、
厳密には全然違うので簡単に解説しようと思います。

そもそもuseFetchとは、**$fetchの利用に特化したuseAsyncDataのラッパー関数**です。

ここでいう$fetchとは[ohmyfetch](https://web.archive.org/web/20231207222840/https://github.com/unjs/ohmyfetch)のことで、これは**様々な環境で使用できるFetchAPI**です。
ohmyfetchはとりあえずaxiosのようなものだと考えてください。

**Nuxt3内ではohmyfetchがグローバルに使用できる**ため、そのオプションを使用することが出来ます。

使い方は以下のような感じです。

```ts
const { data } = await useAsyncData('key', () => $fetch('url'), options{...})
const { data } = await useFetch('url', options{...})
```

useAsyncDataの第一引数で使っているkeyとは、**リクエスト間で重複を排除するための一意の文字列**です。

値としてはなんでもいいです。呼び出すAPIの簡略化された名前とかが多いんですかね・・・
例えば、api/count.tsを呼び出すのなら、`count`みたいな感じですかね。
プロジェクトでのコーディングルールに合わせてもらえたらと思います。

そして、さらに挙げる以下の二つは同義で、
useAsyncDataの第二引数が() => $fetchになるのであれば基本的にuseFetchを使用すれば問題ないです。

```ts
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データ
```

戻り値などの詳細は[公式のページ](https://v3.nuxtjs.org/api/composables/use-fetch/)を参考にしてください。

# **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://v3.nuxtjs.org/api/composables/use-fetch)

[https://github.com/unjs/ohmyfetch](https://github.com/unjs/ohmyfetch)

[https://github.com/azukiazusa1/zenn-contents/blob/main/articles/nuxt3-new-features.md#usefetchuseasyncdata](https://github.com/azukiazusa1/zenn-contents/blob/main/articles/nuxt3-new-features.md#usefetchuseasyncdata)

[https://serversideup.net/post-put-and-patch-requests-with-nuxt-3/](https://serversideup.net/post-put-and-patch-requests-with-nuxt-3/)