vue进行axios的使用详讲

1。安装

    npm install axios --save

2.代码配置

 //main.js配置
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
import ElementUI from 'element-ui'
import axios from 'axios';
import store from './store.js';

import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(VueResource)
Vue.use(ElementUI)
Vue.prototype.$axios=axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

config配置

config/index.js配置
    proxyTable: { 
      '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
        target: 'http://www.wanandroid.com', //源地址 
        changeOrigin: true, //改变源 
        pathRewrite: { 
          '^/api': 'http://www.wanandroid.com' //路径重写 
          } 
      } 
    },

3.使用

  
      // 用箭头函数代替，解决this作用域问题
      this.$axios.get('/api/article/list/0/json').then(res=> {
        console.log("axios 进行网络请求")
        console.log(res.data)
        console.log("axios 进行网络请求")
        // this.result = res
        console.log("本地址:")
        console.log(this)
        console.log("本地址:")
        this.result = res.data
        //在一个方法中调用另外一个方法
      }).catch( (error)=> { console.log(error) })
      //不同module下的state
      console.log(this.$store.state.a.count)
  }

进行post请求的相关问题
https://segmentfault.com/a/1190000012635783

https://www.cnblogs.com/zhouyangla/p/6753673.html