axiosでレスポンスを返すメソッドを作成したがコンポーネント側でうまく使用できない

Question

vuexのstore側にaxiosでapiのレスポンスを返すメソッドを作成しコンポーネント側で前述のメソッドを使用しレスポンスデータを受け取る事を目的としていますがうまくいきません。

//store.js
...
actions: {
  returnAPI() {
    axios.get('hogehuga').then((response) => {
      return response
    })
  }
}

//コンポーネント側
data() {
  return {
    ApiData: ''
  }
},
created() {
　//Promiseが返るがメソッド側と同じように.then()では取れない？
  console.log(this.createAPI())
},
methods: {
  ...mapActions([
    'returnAPI'
  ])
},

コンポーエント側でメソッドを呼んだところPromiseが返ってきているようですがメソッド側と同じように.then()ではレスポンスデータを取得できない？です。
こちらはどのようにすればうまく取得できるのでしょうか？お手数ですがご教授いただけると幸いです。

Answer 1

上のように関数の中のaxios.thenにreturnで書いてもreturnAPIが返す値は何もありません。
なので以下のようにaxios自体を返して読み込み先でthenで受け取るなどする必要があります。

actions: {
  returnAPI() {
    return axios.get('hogehuga')
  }
}

created() {
  this.returnAPI().then(response => {
     console.log(response)
  })
},
methods: {
  ...mapActions([
    'returnAPI'
  ])
},

もし受け取ったresponseを何かしら処理して返したいのであればPromiseオブジェクトを新たに作って返す方法もあると思います。

actions: {
  returnAPI() {
    return new Promise((resolve, reject) => {
      axios
        .get('hogehuga')
        .then(response => {
          resolve(response)
         })
        .catch(error => reject(error))
    }) 
  }
}

Comments

[span]

ご返信遅くなってしまい大変申し訳ありません...いただいた内容を元に無事解決できました！ご教授ありがとうございます。