【初心者必見】Nuxt3のuseAsyncData()とuseFetch()の使い方について徹底解説
今回は、Nuxt3のuseAsyncData()とuseFetch()の違いについて解説しようと思います。
useAsyncData()とuseFetch()については公式ドキュメントにも記載がありますが、ドキュメントを読んでもこれらの使い方を理解するのに僕自身苦労しました。そのため、そうした悩みを解決できるように本記事を書きました。
useAsyncData()の使い方
useAsyncData()は、Nuxt3で非同期処理を実行するための関数です。
ちなみに、JavaScriptでは非同期処理を行う場合にaxiosを使うことが多いかと思いますが、Nuxt3ではaxiosの代わりにuseAsyncData()やuseFetch()を使うことによって、非同期処理を扱うことができます。
百聞は一見に如かずなので、まずは実際のコードを見ていきましょう。
例えば、useAsyncData()を使って、非同期処理でデータを取得するには以下のようなコードを記述します。
const { data: tweets, error } = await useAsyncData(() =>
$fetch('https://xxxx/api/v2/tweets/')
);
上記の例ではtwitterのツイート一覧のようなAPIを叩いているとイメージしてもらうとわかりやすいかと思います。
戻り値としてはdata, errorの2種類を選択しています。（dataにはtweetsという別名をつけています。）
詳細については後述しますが、なんとなくイメージは湧いたのではないでしょうか。
(ちなみに、$fetchはヘルパー関数で、Nuxt3独自のものではありません。)
それでは次は、useAsyncData()の引数と戻り値について詳しく説明していきます。
引数
useAsyncData()の引数は以下のとおりです。
key
useAsyncData()の第一引数はkeyです。
これは、Nuxt側で非同期処理で取得したデータをキャッシュする際の管理に用いられます。
第一引数を省略することもできますが、その場合はNuxt側で自動的にkeyが生成されます。
handler
useAsyncData()の第二引数はhandlerです。
handlerには、実行したい非同期関数を渡します。
先ほどはデータ取得を実施しましたが、それ以外の非同期処理を行うことがuseAsyncData()を使う上では一般的です。
options
useAsyncData()の第三引数はoptionsです。
これは、useAsyncData()の各種設定をするためのオブジェクトです。
このoptionsというオブジェクトには以下のようなプロパティがあります。
全てのプロパティを解説すると大変なので、よく使うプロパティのみ解説していきます。
・lazy
非同期処理ではよくAPIを叩いて、画面を描画するために必要なデータを取ってきますが、
「そうしたデータを取ってくる前でも画面を描画するかどうか」というのを設定するのがこのlazyというプロパティになります。
lazyの値はデフォルトではfalseなので、データを取ってくるまでは画面を描画しないのですが、lazyをtrueにすると、データを取ってくる前に画面を描画し始めます。
lazyの値は一般的にはfalseのままの方が良さそうです。
ちなみに、Nuxt3では、useLazyAsyncData()やuseLazyFetch()という関数もあるのですが、これらはuseAsyncData()やuseFetch()でoptions内のlazyをtrueにした時と全く同じ挙動になります。
・server
serverは、サーバーサイドレンダリングをするかどうかの設定になります。
trueにすればサーバーサイドレンダリングをし、falseであればクライアントサイドレンダリングを実施します。
・watch
watchは、リアクティブな値を監視し、その値が変更されたときに再度handlerに登録された関数を実行します。
例えば、先ほどのtweetsを監視対象とするなら、
watch: [tweets]
のようにして、tweetsの変化を検知したタイミングで非同期処理の再実行ができます。
戻り値
useAsyncData()の戻り値でよく使うものについては以下のとおりです。
data
dataは、handlerで設定した非同期処理でreturnされるデータになります。
pending
pendingは、データ取得をまだ待っているかどうかを表します。
trueであれば、データ取得を待っている状態、falseであればデータ取得が終わっていることになります。
error
もし非同期処理に失敗した場合は、エラーがここに格納されます。
useFetch()の使い方
useFetch()は、useAsyncData()を使いやすいようにラップしたものになります。
そのため、useFetch()でできることは基本的にuseAsyncData()でもできます。
ただし、useFetch()はその名のとおり、非同期処理の中でもデータ取得に特化した関数なので、
useAsyncData()よりも簡単に、非同期処理でのデータ取得を行うことができます。
こちらも、実際のコードの書き方をまず以下に示します。
const { data, pending, error, refresh } = await useFetch('https://xxxx/api/v2/tweets/')
引数
useFetch()の引数は以下のとおり。
url
useFetch()の第一引数はurlです。urlには、APIのエンドポイントを渡します。
これはaxiosとかと同じ使い方なので、axiosを使い慣れている方であればイメージしやすいかと思います。
options
useFetch()の第二引数はoptionsです。
optionsには、useFetch()独自のプロパティと、useAsyncData()でも使えるプロパティがあります。
ここでは、useFetch()独自のプロパティについて解説します。
・method
methodではHTTPメソッドの種類を指定します。
useFetch()という名前を聞くと、GETしかできないようなイメージを抱く方もいるかと思いますが、GETだけでなくPOST,PUT,DELETEなども指定できます。
・query
queryにはクエリパラメータを渡すことができます。
クエリパラメータとは、サーバーに情報を送るためにURLの末尾につけ足す文字列のことです。
例えば、クエリパラメータについて検索したときにはURL欄に以下のように表示されますが、この「?q=クエリパラメータとは」という部分がまさにクエリパラメータになります。
・body
bodyにはリクエストボディの内容をオブジェクトとして渡します。
例えば、createなどのPOST送信であれば、新規作成の際に必要なデータを渡すといった具合ですね。
・headers
headersにはリクエストヘッダーの内容をオブジェクトして渡します。
・baseURL
baseURLには、ベースとなるURLを渡します。
戻り値
useFetch()の戻り値については、useAsyncData()と同じで、以下がよく用いられる戻り値になります。
- data
- pending
- error
他にも、refresh, executeなどの関数も戻り値として含んでいます。これらを用いて、データの再取得を行うことも可能です。
参考書籍
参考情報
Nuxt 3を使いこなすために基礎から徹底解説
Nuxt 3 の useFetch() と useAsyncData() の使い方
Nuxt3 公式ドキュメント
Xについて
僕のXアカウントでは、主にweb開発、AI、会社経営のノウハウについて発信しています。もし興味があれば、フォローしていただけると嬉しいです。
プログラミング学習サポート&キャリア相談について
プログラミング学習サポート&キャリア相談も始めました。興味のある方はこちらから詳細をご覧ください。
Discussion