vue-axiosインストールの開始

Advanced vueaxios-オブジェクト指向の考え方でvueaxiosをカプセル化します

axoisをインストールします

プロジェクトディレクトリファイルを入力し、cmdコマンドを入力します。npminstallaxios --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/>'
})

リクエストを取得

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

リクエスト後

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