vue调用后端接口——axios和vue-axios的使用

1. vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现
2. axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护
3. 参考：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 => {});