async/awaitで非同期処理させた結果を返り値としてreturnしたい

※全力で省略して書きます

↓↓↓ こんな感じでできる ↓↓↓

// 呼び出し元関数
async doUpdate() {
   const res = await this.apiSubmit()
   console.log(res) // 非同期処理の結果が欲しい
}
// 非同期側
async apiSubmit() {
  return await axios.post(url, data)
    .then(response => {
      // 成功時の処理etc
      return response
    })
    .catch(error => {
      // 失敗時の処理etc
      return error
    })
}

ことのはじまり

Vuexのactionsでaxiosの返り値をコンポーネントの呼び出し元メソッドに返却して処理をしたかった。
しかし、呼び出し元メソッドにasync/awaitを指定しなかったためにPromisだけ返却されて困った。

更に、then/catchを使いたかったが
await axios.post(url, data).then(response =>{return response})
としてもundefinedが返却されてしまった。

要点

• async/awaitは呼び出し元の親関数も指定しないと非同期処理よりも先に親関数が終了してしまう
• thenやcatchを使った場合はthenの中でもreturnしないとundefinedになる（あたりまえ）