vue -- axios安装 入门使用

vue axios进阶–以面向对象的思维 对 vue axios 进行封装

安装axois

进入项目目录文件，进入cmd命令：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: ''
})

get请求

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
      }
    },