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