【Vue.js】Vue.jsでAjax通信(php)【axios,php】

【Vue.js】Vue.jsでAjax通信(php)【axios,php】

今回はVue.jsからAjax通信でWEBAPIを呼び出し画面に反映することを目的とします。
今回はphpを使っていますが、そこは問題ではないのでphpには焦点を当てないで書いていきます。

Vue.jsの公式ドキュメントで推奨されている axiosを使います。
jp.vuejs.org

<やること>

パラメータの準備

WEBAPIの呼び出し

成功、失敗時の処理

受け取ったデータを画面に反映

まずは全体のソース。
以下のlistComponentが呼ばれたと同時に、APIを呼び出して、データを取得します。

■listComponent

// listComponent
Vue.component('lists', {
    // TODO 写真
    template : 
        '<div class="contents">'+
          '<h1>Lists</h1>'+
          '<ul>'+
            '<li v-for="content in contentList">{{content.title}}</li>'+
          '</ul>'+
        '</div><!-- .contents -->',
    data: function () {
        return {
            contentList : [],
            shareState : store.state
        }
    },
    methods: {
      getList : function() {
      	  // axiosのパラメータ指定
          let params = new URLSearchParams();
          params.append('contentIdList', []);
          params.append('catgoryCodeList', []);
          params.append('genreCodeList', []);

          var vm = this;

          axios.post('list.php', params) // => 成功時
          .then(function (response) {
            vm.contentList = response.data;
          })
          .catch(function (error) { // => 失敗時
            console.log("error");
          })
        }
    },
    mounted: function(){
      this.getList();
    },
    watch : {
      contentList : function(val){
        this.shareState.contentList = val;
      }
    }
})

パラメータの準備

axiosのパラメータ指定方法はこちらを参考にさせていただきました。
qiita.com

今回はjson形式で渡すようにしました。テストなので渡すパラメータの中身は空にしています。
phpでjson形式のパラメータを受取流にはURLSearchParamsを使えつのことなので、以下のようにしています。

// axiosのパラメータ指定
let params = new URLSearchParams();
params.append('contentIdList', []);
params.append('catgoryCodeList', []);
params.append('genreCodeList', []);

上の例はリストを渡していますが、文字列とかを渡したいのであれば

// axiosのパラメータ指定
let params = new URLSearchParams();
params.append('contentId', "content");
params.append('catgoryCode', "category");
params.append('genreCode', "genre");

のように書けば大丈夫です。

WEBAPIの呼び出し

まずは画面で使用するデータと、データを取得するメソッドを作成します。

data: function () {
	// 画面で使用するデータ。shareStateはコンポーネント間のデータ受け渡しに使用する。
    return {
        contentList : [],
        shareState : store.state
    }
},
methods: {
	/**
	 * 一覧を取得します。
	 */
	getList : function() {
		// axiosのパラメータ指定
                let params = new URLSearchParams();
                params.append('contentIdList', []);
                params.append('catgoryCodeList', []);
                params.append('genreCodeList', []);

		var vm = this;

		// axiosの処理を記述
		axios.post('list.php', params) // => 成功時
		.then(function (response) {
			vm.contentList = response.data;
		})
		.catch(function (error) { // => 失敗時
			console.log("error");
		})
	}
},

axiosの使い方はgetであれば

	axios.get(url);

postであれば

	axios.post(url);

先程紹介しましたが

qiita.com

こちらが詳しいので、参考にしてください。
今回はpostで先程準備したdataを設定。phpを使っているので

	axios.post('list.php', params);

としています。
listComponentが呼ばれた時に、データを取得ができるようにmountedからこのメソッドを呼び出します。

    mounted: function(){
      this.getList();
    },

成功、失敗時の処理

APIの処理に成功した時と失敗した時の処理を書きます。

data: function () {
	// 画面で使用するデータ。shareStateはコンポーネント間のデータ受け渡しに使用する。
    return {
        contentList : [],
        shareState : store.state
    }
},
methods: {
// axiosの処理を記述
axios.post('list.php', params) 
.then(function (response) {
	// 成功時の対応
	vm.contentList = response.data;
})
.catch(function (error) { 
	// 失敗時の対応
	console.log("error");
})

axiosで成功した時は「then」を使用して、

.then(function (response) {
	// 成功時の対応
})

失敗した時は「catch」を使用して、

.catch(function (error) { 
	// 失敗時の対応
})

とします。
今回、成功時にはAPIで取得したデータを受け取るだけの実装です。

var vm = this;

// axiosの処理を記述
axios.post('list.php', params) 
.then(function (response) {
	// 成功時の対応
	vm.contentList = response.data;
})

注意点としては、axiosの内部処理では「this.contentList」のように「this」を使えないので、一旦別の変数に渡す必要があります。

var vm = this;

また、APIから受け取ったデータは「response.data」に入っています。

vm.contentList = response.data;

ここの処理で、先程作成したデータのcontentListにAPIから受け取ったデータが格納されたはずです。

受け取ったデータを画面に反映

あとはcontentListの長さ分だけループして、画面に表示する処理を書きます。

<li v-for="content in contentList">{{content.title}}</li>

以上です。