asyncDataメソッドの挙動や使い方

Nuxt.jsにはコンポーネントを初期化する前に、非同期な処理でデータを取得するためのメソッドとして「asyncData」が用意されています。このメソッドとVue.jsにある元々の「data」がどのように処理されのるか分からなかったので確認してみました。

asyncDataメソッドの挙動

まず、asyncDataメソッドの特徴としては以下の通り。

コンポーネントデータ（data）とマージされる（同じプロパティがあった場合はasyncDataで取得したデータで上書き）
returnする値は「Promiseを返す」か「async/await」を使って「データを返す」のどちらか
コンポーネントがインスタンス化される前に呼び出されるので、thisを通してコンポーネントのインスタンスにアクセスすることはできない
サーバー側でプレレンダリングする場合に使用
サーバーサイドで1回、クライアントサイドではページ遷移するたびに呼び出される

Nuxt.jsには「asyncData」メソッドと似た「fetch」メソッドがあり、書き方もほとんど同じですが、fetchはアプリ共通のデータ（Vuex Store）をセットするためのもので、コンポーネントデータ（data）にマージされない、という違いがあります。

サンプルコード

以下、asyncDataメソッドの挙動を確認するためのサンプルコードになります。


<template>
  <div class="container">
    <div>{{ name }}</div>
    <div v-for="post in posts" :key="post.id">
      {{ post.id }}. {{ post.title }}
    </div>
  </div>
</template>

<script>
const axios = require("axios");
export default {
  data() {
    console.log("data");
    return {
      name: "aaa",
      posts: [{ id: 0, title: "none" }]
    };
  },
  asyncData({ context, error }) {
    console.log("asyncData");
    return axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(res => {
        console.log("asyncData result");
        return { posts: res.data };
      })
      .catch(e => {
        error({ statusCode: e.response.status, message: "Sample Error!!" });
      });
  }
};
</script>

asyncDataメソッドで取得したデータがマージされていることが分かるように、コンポーネントデータ（data）に「posts: [{ id: 0, title: "none" }]」を設定しています。

また、処理される順序の確認のため、「data」「asyncData」「asyncDataのresult」のタイミングでコンソールログを出力しています。

「error」については後述します。

実行結果

上記のサンプルコードを実行した結果は以下の通り。

コンポーネントデータ（data）がasyncDataメソッドで取得したデータとマージされているのが分かります。

コンソールログの出力は以下の通り。

asyncData
asyncData result
data

「asyncData result」が最後に実行されるのか思っていましたが、どうやら違うようです。

エラー処理

最後にエラー処理について。

asyncDataメソッドの引数に「error」を設定して、処理が失敗した時などで、共通のエラーページに飛ばしたい時に使用します。

error({ statusCode: e.response.status, message: "Sample Error!!" });

サンプルコードのaxiosでアクセスするURLを存在しないURLに書き換えて実行すると、以下のようなエラーページが表示されます。

messageに設定した内容がエラーページに表示されます。

表示されているページはデフォルトで用意されている共通のページで、変更することも可能です。

エラーページ - NuxtJS

参考リンク

非同期なデータ - NuxtJS

asyncDataメソッドの挙動や使い方

目次