---
title: 1つのページで複数のAPIからのレスポンスを得たい場合はどうしたら良いですか？
description: 1つのページで複数のAPIレスポンスを得る場合、下記２パターンの方法があります。
category: howto
---

import StructuredDataFaqs from '@site/src/components/StructuredDataFaqs';

<StructuredDataFaqs faqs={[
    { question: "1つのページで複数のAPIからのレスポンスを得たい場合はどうしたら良いですか？", answer: "1つのページで複数のAPIレスポンスを得る場合、下記２パターンの方法があります" }
]} />

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

- Promise.allを利用
- awaitを利用

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

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

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

## Promise.all(...)で同時実行する場合の記述例  
(foo & bar & ...)のように同時にデータを取得します。  

```markup
<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 -> ...)のように順番にデータを取得します。  

```markup
<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](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- MDN Web Docs -> [await](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await)
