Vue.jsでの非同期通信の方法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsでの非同期通信の方法について、簡単に解説していきます。

axiosのインストール

Vue.jsでの非同期通信にはaxiosが便利です。

今回は通常のインストールではなくCDN版で対応します。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

headタグ内等で上記のコードを書いて読み込めば問題ありません。

Vue.js

Vue.jsのサンプルコードは以下のとおりです。

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      postData: {}
    }
  },
  methods: {
    getPostData: function() {
      axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        this.postData = res.data
        console.log(this.postData)
      })
    }
  }
});

app.getPostData();

ここではJSONPlaceholderのAPIから投稿データを取得するメソッドを用意しています。

このメソッドで取得したデータを格納するためにpostDataというオブジェクトも用意しています。

HTML

HTMLのサンプルコードは以下のとおりです。

<div id="app">
  <ul>
    <li v-for="post in postData" :key="post.id">
        ID:{{ post.id }}<br>
        タイトル:{{ post.title }}<br>
        本文:{{ post.body }}<br>
    </li>
  </ul>
</div>

APIから取得した投稿データを投稿ごとにli要素で出力します。

その際にv-forを使った繰返処理を使っており、これで全件を描画させています。