前面對愛可信有了一個全面的介紹，下面結合例項說一下axios和vue-axios，以及如何用axios請求本地json資料。

首先看一下將axios註冊成全域性函式的用法：main.js 

import axios from 'axios'

Vue.prototype.axios = axios

新增一個全域性函式，然後在相應的.vue檔案中使用

defaultData(){  
  this.axios.get('本地的json檔案地址', {  
  }).then(function (response) {  
      // 將接收到的資料傳遞到data的資料中
  }).catch(function (response) {  
      console.log(response);  
  }); 
} 
 

這樣元件就可以引用本地的資料了，需要說明的時.json 檔案最好放在static資料夾中，這個資料夾中的檔案在打包的時候是不會進行壓縮和處理的。

那麼vue-axios的作用是什麼？

相信很多人都有這樣的疑問了，一起來看一下vue-axios的原始碼：

index.js

(function () {

/**
 * Install plugin
 * @param Vue
 * @param axios
 */

function plugin(Vue, axios) {

  if (plugin.installed) {
    return
  }
  plugin.installed = true

  if (!axios) {
    console.error('You have to install axios')
    return
  }

  Vue.axios = axios

  Object.defineProperties(Vue.prototype, {

    axios: {
      get() {
        return axios
      }
    },

    $http: {
      get() {
        return axios
      }
    }

  })
}

if (typeof exports == "object") {
  module.exports = plugin
} else if (typeof define == "function" && define.amd) {
  define([], function(){ return plugin })
} else if (window.Vue && window.axios) {
  Vue.use(plugin, window.axios)
}

})();
 

簡單的說，vue-axios是為了更加符合規範的，直接將axios繫結到原型鏈上不是不可以，但和他人寫作的時候就必須註明你註冊的變數名稱，反而不如直接使用vue-axios。

vue-axios用法

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)