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.
The examples below are for Nuxt.js projects. You may need to make your own adjustments as needed.
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: