Nuxt.jsにて複数のAPIをPromise.Allで呼び出す方法

nuxt-api-call-promise-all.md

Nuxt.jsにて複数のAPIをPromise.Allで呼び出す方法

概要

Nuxt.jsの画面表示時に必要なデータを得るためのAPI呼び出しが増えると画面描画が遅くなる問題を、APIをPromise.allで呼び出すことにより回避する。

API呼び出し処理を別関数にすることによりリロード処理にも利用可能となる。

実装サンプル

コンボボックスの選択肢をAPIから取得するという利用シナリオ。

<script>
function getData(app) {
  return Promise.all([
    app.$selectApi.companiesWithBlankList(),
    app.$selectApi.languagesWithBlankList(),
    app.$selectApi.rolesWithBlankList()
  ]).then( ( [companies, languages, roles] ) => {
    const data = {}
    data.companies = companies
    data.languages = languages
    data.roles = roles
    // ここでデータ編集を行って呼び元の処理を削減したりできる
    return Promise.resolve(data)
  })
}

export default {
  async asyncData({ app }) {
    const data = await getData(app)
    return {
      editedSelects: {
        companyName: data.companies,
        languageName: data.languages,
        roleName: data.roles,
      },
    }
  },
  data() {
    return {
      editedSelects: {
        companyName: [],
        languageName: [],
        roleName: [],
      },
    }
  },
  method: {
    // リロード処理
    async reload() {
      const data = await getData(this)
      this.editedSelects.companyName = data.companies
      this.editedSelects.languageName = data.languages
      this.editedSelects.roleName = data.roles
    },
  }
}
</script>