APIのレスポンスデータを取得する方法

Question

実現したいこと

以下の処理でaxiosのレスポンスの値を取得できるようにしたい

困っていること

• axiosのデータをdatasに代入したがaxiosのレスポンスのデータを取得できずに困っています
• axiosのデータをvuexに入れているのに直後のconsole.logを覗いてみると、空になっていた

  async created() {
　　 const datas = axios.get("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {return response.data});
    console.log(datas);
　　 axios.get("https://jsonplaceholder.typicode.com/posts")
      .then((response) => this.$store.commit("posts", res.data));
　　 console.log(this.$store.state.posts); //リロードすると中身が空だった
  }

datesのconsole.logの中身

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object

Answer 1

axiosのデータをvuexに入れているのに直後のconsole.logを覗いてみると、空になっていた

非同期処理の完了を待たずにconsole.logしているためかと思われます。
非同期処理の後に実行したい処理は.then()の中に書くようにすればうまくいくはずです。

axios.get("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    this.$store.commit("posts", response.data);
    console.log(this.$store.state.posts); // ここに書く！
  })

あるいはawaitを用いるとよりスッキリと書けます。

// awaitがあるので非同期処理が終わるまで次の処理に進まない
const response = await axios.get("https://jsonplaceholder.typicode.com/posts"); 
this.$store.commit("posts", response.data);
console.log(this.$store.state.posts);