vue/cliでaxiosを使用する際によくある3つの間違った使い方

axiosとは

PromiseベースのHTTPクライアント。

Vue.jsではAPIの使用にはaxiosを推奨している。

vue/cliでなければaxiosを読み込んで以下のように使用する。

new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  mounted() {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

vue/cliであれば

export default {
    data() {
      return {
        info: null
      };
    },
    mounted() {
      this.$axios
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => (this.info = response))
    }
}

1. vue/cliではCDNから読み込まない

vue/cliでは直接CDNを使用してindex.htmlにscriptタグを記載して読み込むようなことはしない。

CDNでも使用はできるが、Consoleに警告が表示されるので控えたほうが良い。

import Vue from 'vue'
import axios from 'axios'
import App from './App.vue'

Vue.prototype.$axios = axios

vue/cliなら通常はnpm i -D axiosでダウンロードしてmain.jsでimportして使用する。

2. Vue.use(axios)は使用しない

import axiosの下にVue.use(axios)を記載しているコードがたまにあるが、通常はこれだとエラーになるので不要。

vue-axiosを使用しているなどの理由があるなら必要。

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App.vue'

Vue.use(VueAxios, axios)

3. Vue.prototype.$httpで設定する

Vue.prototype.$httpで設定するとaxiosが使用されているのがわかりにくくなるのと、もしもすでにthis.$httpで使用されていると重複するので避けたほうが良い。

Vue.jsの公式ドキュメントに「もしvue-resourceのようにthis.$httpとしてアクセスしたい場合は、単にVue.prototype.$http = axios と設定すればよいです。」と書かれてあるため、Vue.prototype.$httpで設定しているケースがあるようだ。