Vue2.0学习——axios用法详解2引入本地json数据(axios和vue-axios)

前面对爱可信有了一个全面的介绍，下面结合实例说一下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)

使用上和第一种是没有区别的，为了便于合作，建议大家使用vue-axios。