Nuxt.jsでasync/asyncData/awaitがわからなかったのでまとめた

はじめに

Rails+Nuxt.jsをやっていてわからなかったので頭の整理も兼ねてまとめます。

今回わからなかったコード

 async asyncData ({ $axios }) {
    let users = []  //空配列
    await $axios.$get('/api/v1/users')   //nuxt axiosの記述でデータを取得する
    .then(res => (users = res))     //返ってきたデータをusers配列に格納
    return { users }        //usersの配列をtemplateで使用できるように返す

async　asyncData ({＄axios}) {

async
Promiseを返してくれる。
Promiseとは外部からデータを取得した際に成功した処理と失敗した処理を返してくれるクラス

asyncData()
コンポーネントの作成前に実行させる。axiosは読み込みに時間がかかるため最初に読み込みたいのでここで記載する。Nuxt.js作成の際にaxiosを選択した為、今回の場合はNuxtのmoduleからaxiosを持ってきている。

await $axios.$get('/api/v1/users')

await
Promiseを返すまでJavaScriptを待機させる。
axiosの通信は時間がかかるため、確実に処理を実行するためにawaitをつける

$axios.$get(取得先)
axiosで取得先を指定しています。$がつくのはNuxt.jsの書き方。

.then(res => (users = res))

.then(res => (users = res))
先ほどPromiseは成功した時の処理と失敗した時の処理を返すと書いたが、.then(処理)では成功した時の処理を書くことができる。
thenの中身を見るとusersの空配列にresに格納されている処理結果を代入している。今回はaxiosを使用してRailsとやりとりしているため、thenの中身にはRailsで作成したユーザーデータが入っている。
最後returnをしてtemplate内で使えるようにしてあげる