vue.js axios的安装及使用

安装axois

npm install axios --save

axios引入使用

<script>
import axios from 'axios'
export default {
  name: 'App',
  methods:{
    test(){
      axios.get().then(function (response) {
	    console.log(response);
	  })
	  .catch(function (error) {
	    console.log(error);
	  });
    }
  }
}
</script>

axios进阶main.js中引入

将axios挂载到Vue原型中

import Vue from 'vue'
import App from './App'
import axios from 'axios'

Vue.prototype.$axios=axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

get/post请求

this.$axios.get('请求地址')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求需要main.js中引入qs

import qs from 'querystring'

Vue.prototype.qs=qs

//此处注意，参数必须转化成字符串
this.$axios.post("http://localhost:8888/dologin",this.qs.stringify({
    username:"hello",
    userpass:"123456"
})).then(response=>{
    console.log(response);
}).catch(error=>{
    console.log(error);
});

跨域问题

proxyTable: {
	   //"/代理地址"
      "/houduan": {
       //被代理地址
        target: "http://localhost:8080/chatroom/",
        pathRewrite: {
          //^/代理地址
          '^/houduan': ''
        },
        changeOrigin: true
      }
    },