axios异步请求实现点击按钮获取请求成功后的结果 html代码：
<body> <div id='app'> {{response}} <button @click='findAllCustomers'>查询所有顾客信息</button> <button @click='findAllCustomersById'>通过id查询顾客信息</button> <button @click='login'>登录</button> <button @click='queryCustomers'>分页查询顾客信息</button> </div> </body>四个按钮分别代表get无参，get有参，post参数-json，post参数-查询字符串，给出js代码 ！！注意axios在发送post请求时会自动将参数对象转为json字符串，因此后台若要json字符串直接将封装好的参数传入；后台要字符串则需要将使用Qs.stringify(obj)进行转换
<script> window.onload=function(){ new Vue({ el:'#app', data:{ baseUrl:'http://123.57.57.227:5588/', response:[] }, methods:{ //get无参 findAllCustomers(){ // axios({ // url:'http://39.96.21.48:5588/customer/findAll', // method:'get', // // params:{} // }).then((res)=>{ // console.log(res.data.data) // this.response=res.data.data // }) //简写 axios.get(this.baseUrl+'customer/findAll').then((res)=>{ console.log(res.data.data) }) }, //get有参 findAllCustomersById(){ // axios({ // url:baseUrl+'customer/findCustomerById', // method:'get', // params:{id:134} // }).then((res)=>{ // console.log(res.data.data) // this.response=res.data.data // }) //简写 axios.get(this.baseUrl+'customer/findCustomerById',{params:{id:134}}).then((res)=>{ console.log(res.data.data) }) }, //post-json字符串 login(){ let obj={ password:123321, type:"customer", username:"susan" }; // axios({ // url:'http://39.96.21.48:5588/user/login', // method:'post', // data:obj // }).then((res)=>{ // console.log(res.data.data.token) // }) //简写 axios.post(this.baseUrl+'user/login',obj).then((res)=>{ console.log(res.data.data) }) }, //post-查询字符串 queryCustomers(){ let obj={ page:0, pageSize:10 } // axios({ // url:'http://39.96.21.48:5588/customer/query', // method:'post', // data:Qs.stringify(obj) // }).then((res)=>{ // console.log(res.data.data.list) // }) axios.post(this.baseUrl+'customer/query',Qs.stringify(obj)).then((res)=>{ console.log(res.data.data.list) }) }, addressWithCustomers(){ axios.get(this.baseUrl+'address/findAllAddressWithCustomer').then((res)=>{ console.log(res) }) } } }) } </script>总结简写形式：
<script> window.onload=function(){ new Vue({ el:'#app', data:{ baseUrl:'http://123.57.57.227:5588/', response:[] }, methods:{ //get无参 findAllCustomers(){ //简写 axios.get(this.baseUrl+'customer/findAll').then((res)=>{ console.log(res.data.data) }) }, //get有参 findAllCustomersById(){ //简写 axios.get(this.baseUrl+'customer/findCustomerById',{params:{id:134}}).then((res)=>{ console.log(res.data.data) }) }, //post-json字符串 login(){ let obj={ password:123321, type:"customer", username:"susan" }; axios.post(this.baseUrl+'user/login',obj).then((res)=>{ console.log(res.data.data) }) }, //post-查询字符串 queryCustomers(){ let obj={ page:0, pageSize:10 } axios.post(this.baseUrl+'customer/query',Qs.stringify(obj)).then((res)=>{ console.log(res.data.data.list) }) } } }) } </script>get有参数时的写法：（注意params）
axios.get(this.baseUrl+'customer/findCustomerById',params{id:134}}).then((res)=>{ console.log(res.data.data) })