24、Vue-axios常用请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行找的皮卡丘</title>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
Vue.prototype.$axios = axios;
var App={
data(){
return {
res1:'',
res2:'',
}
},
template:`
<div>
响应1：{{res1}}
响应2：{{res2}}
<button @click='senAjax'>并发请求</button>
</div>
`,
methods:{
senAjax(){
this.$axios.defaults.baseURL='http://127.0.0.1:8888';
var r1 = this.$axios.get('/');
var r2 = this.$axios.post('/add',userId="123456");
this.$axios.all([r1,r2])
.then(this.$axios.spread((res1,res2)=>{
this.res1 = res1.data;
this.res2 = res2.data;
}))
.catch(err=>{
console.log(err)
})
}
}
};
new Vue({
el:'#app',
data(){
return {
}
},
template:`<App/>`,
components:{
App
}
});
</script>
</html>