vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现 axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护 参考：GitHub上搜索axios，查看API文档：https://github.com/axios/axios

axios和vue-axios区别

1、axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件 2、axios使用的时候不能像vue的插件（如：Vue-Router、VueX等）通过Vue.use()安装插件，需要在原型上进行绑定：Vue.prototype.$axios = axios; 3、vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装:Vue.use(vueAxios);

注意: 使用vue的插件的写法（vue-axios）更符合vue整体的生态环境，直接写原型链会有些粗暴，且直接写原型链你取名为$http，你的项目成员可能取另外的名字，维护起来比较麻烦，而统一使用vue-axios就没有太多歧义

axios的使用

安装

输入命令

# 安装axios
npm install axios -S

引入

修改main.js文件

import Vue from vue
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
import App from ./App.vue
import axios from axios

Vue.use(ElementUI);
Vue.use(axios);
Vue.config.productionTip = false

new Vue({
          
   
  render: h => h(App),
}).$mount(#app)

使用

1.执行get请求

axios.get(/user, {
          
   
    params: {
          
   
      ID: 12345
    }
  })
  .then(function (response) {
          
   
    console.log(response);
  })
  .catch(function (error) {
          
   
    console.log(error);
  });

2.执行 post请求

axios.post(/user, {
          
   
    firstName: Fred,
    lastName: Flintstone
  })
  .then(function (response) {
          
   
    console.log(response);
  })
  .catch(function (error) {
          
   
    console.log(error);
  });

3.执行多个并发请求

function getUserAccount() {
          
   
  return axios.get(/user/12345);
}

function getUserPermissions() {
          
   
  return axios.get(/user/12345/permissions);
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
          
   
    // 两个请求现在都执行完成
  }));

vue-axios的使用

安装

# 安装axios
npm install axios -S  
# 安装vue-axios
npm install --save axios vue-axios

引入

修改main.js文件

import Vue from vue
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
import App from ./App.vue
import axios from axios
import VueAxios from vue-axios

Vue.use(ElementUI);
Vue.use(VueAxios, axios);
Vue.config.productionTip = false

new Vue({
          
   
  render: h => h(App),
}).$mount(#app)

使用

用法1：

Vue.axios.get(url,{
          
   params:userId:1}).then(res => {
          
   }).catch(err => {
          
   });

用法2：

this.axios.get(url,{
          
   params:userId:1}).then(res => {
          
   }).catch(err => {
          
   });

用法3：

this.$http.get(url,{
          
   params:userId:1}).then(res => {
          
   }).catch(err => {
          
   });