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