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: '<App/>'
})

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