

## 発生している問題

クリックイベントで発火してAPIを二つ順番に投げる処理を書きたいのですが、以下のように実装したところ、一つ目のAPIを実行した時点で処理が終わってしまい、二つ目の
API が実行されません。

async/await を利用し、順次 axios で API が実行されると期待したのですが、下記の処理では firstAPI
が実行された後の処理が動きませんでした。

コンソールにも"1:firstAPI実行"だけが出力されていました。

やりたいこととしては一つ目の API でサーバー側のデータを更新し、二つ目の API で状態を取得して data
を更新し、描画に反映させたいと考えております。

Vue 初心者なのですが何か間違った実装なのでしょうか・・・。

* * *

## 該当のソースコード

[code]

    <template>
        <el-button　v-if="scope.row.status" @click="callAPI()" type="danger" round>連携を取り消す</el-button>
    </template>
    
    <script>
    import axios from "axios";
    export default {
        name: "Dashboard",
        data: () => {
            return {
              data: [],
              error: ""
            };
        },
        methods:{
            async callAPI(){
                try {
                    // firstAPI
                    console.log('1:firstAPI実行')
                    await axios.delete("http://localhost:3000/api/first);
                    console.log('2:firstAPI終了')
    
                    // secondAPI
                    console.log('3:secondAPI実行')
                    const secondResult = await axios.get("http://localhost:3000/api/second);
                    console.log('4:secondAPI終了')
    
                    this.data= secondResult.data;
    
                } catch (error) {
                   console.log(error);
                   this.error = error;
                }
            }
        }
    };
    </script>
    
[/code]

* * *

## 補足情報 (OS, ツールのバージョンなど)

  * "vue": "^2.5.2"
  * "vue-router": "^3.0.1"
  * "vuex": "^3.0.1"
  * "axios":"^0.18.0"


CC BY-SA 4.0
2019-01-18T06:08:41.807
52071
2021-04-04T00:53:45.717
2021-04-04T00:53:45.717
32986
27037
question
javascript vue.js 非同期 axios
Vue.jsのmethods内にて複数のawaitを実行すると、一つ目のawaitを実行した時点で処理が終わってしまう。