vue中使用axios

引入axios

错误用法

在main.js中引入，需要注意的是，因为axios是第三方库，不是vue的插件，所以下面的这种写法不支持。

import axios from 'axios';
Vue.use(axios) 

正确用法

结合 vue-axios使用，vue-axios 是将 axios 集成到 Vue.js 的小包装器，可以像插件一样进行安装，具体用法是：

安装

npm install --save axios vue-axios

将下面代码加入入口文件：

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

使用：
下面三种方式都可以

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

还有一种不太推荐的用法，原型绑定引入

在原型上进行绑定, 直接写原型链, 注册一个$http，和项目其他成员协作的时候就必须注明你注册的变量名称，而使用vue-axios大家就没有歧义, 因此此用法不推荐.

import axios from 'axios'
Vue.prototype.$http= axios
// 也可以写成  Vue.prototype.$axios = axios, 调用, this.$axios;