Vue.jsとaxiosでAjax機能を組み込む

2018.5.23 (水)

Vueを使うと普通にコーディングしている限りではjQueryが用なしになってしまいます。jQueryで必要になるのはAjaxぐらいの機能しかなく、それだけの機能のためにjQueryを使うのもなになので、Ajaxは別のエージェントを使うことに自然となってくるわけです。SuperAgentとaxiosで迷うところなのですがFrontのエンジニアに聞いてみたところ、

axios => コーラ
SuperAgent => ペプシ・コーラ

なのだそうなので、ここではあえてaxiosを使います。

axiosのインストールとセットアップ

npmで入れると楽。

npm install --save-dev axios

axios@0.18.0が入りました。

Get

jsonを取得するだけだったら、最低これで動きました。Getです。

'use strict';
import Axios from 'axios';

const axios_obj = Axios.create({
  headers: {
    'ContentType': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  responseType: 'json'
});

axios_obj.get('http://example.com/get_api').then(response_get => {
    console.log(response_get.data);
});

Post

post値を第二引数に設定してあげればOKです。

'use strict';
import Axios from 'axios';

const axios_obj = Axios.create({
  headers: {
    'ContentType': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  responseType: 'json'
});

const data = { firstName : 'ochiai', lastName : 'akiko' };

axios_obj.post('http://example.com/post_api', data).then(response_post => {
    console.log(response_post.data);
});

Vueで表示してみる

取得したデータをそのままvueで表示します。

const axios_obj = Axios.create({
  baseURL: 'https://example.com',
  headers: {
    'ContentType': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  responseType: 'json'
});
const path = "/posts";
axios_obj.get(path).then(function(response){
  var app = new Vue({
    el: '#test',
    data: {
      message: response.data
    }
  })
});

html (blade)

<div id="test">
  @{{message}}
</div>

というようなことができました。


Vue.js初心者向け:Vue.jsとaxiosでJsonを取得してコンポーネントに反映するメモ
axiosを乗りこなす機能についての知見集
Github: axios/axios