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

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

• 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の詳細は下記ドキュメントをご参照ください。

• MDN Web Docs -> Promise
• MDN Web Docs -> await