vue axios advanced-encapsulate vue axios with object-oriented thinking
Install axois
Enter the project directory file, enter the cmd command: npm install axios --save
axios simple to use
<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 preliminary advanced
Introduced in main.js
Mount axios into the Vue prototype
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 request
this.$axios.get('请求地址')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
post request
Need to introduce qs in main.js
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);
});
Solve the crossover problem
proxyTable: {
//"/代理地址"
"/houduan": {
//被代理地址
target: "http://localhost:8080/chatroom/",
pathRewrite: {
//^/代理地址
'^/houduan': ''
},
changeOrigin: true
}
},