VueでAjaxやるときはaxiosがおすすめなんだって。（Vue.js始めるおれおれアドベントカレンダー2016 – 14日目）

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

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

VueでAjax

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

• vue-resource の引退について – vue.js
• mzabriskie/axios: Promise based HTTP client for the browser and node.js

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というものを用意している人がいた。

• imcvampire/vue-axios: A small wrapper for integrating axios to Vuejs

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

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

よくわからないこと

公式推奨って

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

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