Vue.js始めるおれおれアドベントカレンダー2016 – 14日目

Vueあんまり関係ない感じだけど、全く関係ないわけでもないので良しとしてください。

VueでAjax

かつては公式で vue-resource というライブラリを用意していたけれど、今は axios というライブラリが公式推奨であるらしい。

axios

使い方も簡単そう。

IE 8+で動作。手厚い。(ちなみにVue.js v2はIE 9+。) もちろん昔の環境で動かすには最近の書き方は通じませんので、なんかまあバベるとか何とかしてください。

インストール

$ npm i -S axios
const axios = require('axios')

使い方

axios.get(url) みたいにして送信、戻り値はPromise。

res.data に応答内容が入ってるみたい。

data: {
  sending: false
},
methods: {
  form_submit (event) {
    this.sending = true

    axios.get(url, data)
      .then(res => {
        this.sending = false
        console.log(res.status, res.statusText, res.data)
        // => 200, "OK", { message: "You just sent the data!" }
      })
      .catch(error => {
        this.sending = false
        throw error
      })
  }
}

もっとVueに繋げる

vue-resourceはVueと密に繋がって、 this.$http.get() みたいな感じで使うそうだ。

axiosは完全に独立しているけれど、 this から参照できるようにしたい場合用に、vue-axiosというものを用意している人がいた。

これを導入すると this.axios.get() が使えるようになるとか。(試してません。)

長所は require() を省けることくらい? んーでも省かない方が思想的に良いのでは。

よくわからないこと

公式推奨って

何だろ? どこかに一覧とかあるのかな?

原文の表現は、引用符付きで “official recommendation” 。