1つのページで複数のAPIからのレスポンスを得たい場合はどうしたら良いですか?

1つのページで複数のAPIレスポンスを得る場合、下記2パターンの方法があります。

  • Promise.allを利用
  • awaitを利用

それぞれのパターンの記述例を記載します。

Nuxt.jsを利用したプロジェクトを前提としていますので、ご自身のケースに合わせて修正ください。

下記部分はご自身のAPIのURLに合わせてください。
process.env.BASE_URL + '/rcms-api/14/top/1002'
process.env.BASE_URL + '/rcms-api/1/form/6'

Promise.all(...)で同時実行する場合の記述例

(foo & bar & ...)のように同時にデータを取得します。

<script>
export default {
  async asyncData({ $axios }) {
    const [foo, bar] = await Promise.all([
      $axios.$get(process.env.BASE_URL + '/rcms-api/14/top/1002'),
      $axios.$get(process.env.BASE_URL + '/rcms-api/1/form/6')
      ]);
    return {foo,bar};
  },
}
</script>

awaitで逐次実行する場合の記述例

(foo -> bar -> ...)のように順番にデータを取得します。

<script>
export default {
    data() {
      return {
        foo: null,
        bar: null
      }
    },
    methods: {
      async doAsync() {
        const foo = await this.$axios.$get(process.env.BASE_URL + '/rcms-api/14/top/1002');
        const bar = await this.$axios.$get(process.env.BASE_URL + '/rcms-api/1/form/6');
        this.foo = foo;
        this.bar = bar;
      }
    },
    mounted() {
      this.doAsync()
    }
}
</script>

Promise、awaitの詳細は下記ドキュメントをご参照ください。

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。