How do I get responses from multiple APIs on one page?

You can obtain multiple API responses on a single page using one of the following:

• Promise.all()
• await

An example for each method is given below.

info

The examples below are for Nuxt.js projects. You may need to make your own adjustments as needed.

caution

The following expressions should match the URL of your API:
process.env.BASE_URL + '/rcms-api/14/top/1002'
process.env.BASE_URL + '/rcms-api/1/form/6'

Parallel execution with Promise.all()

The code sample below retrieves data concurrently as in (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>

Serial execution with await

The code sample below retrieves data in a sequential order (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>

For more information on the above expressions, see:

• MDN Web Docs: Promise.all()
• MDN Web Docs: await