<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios</title>
</head>
<body>
<div id="app"></div>
<script type= "text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
data(){
return{
msg:''
}
},
template:`
<div>
<button @click='sendAjax'>发Get请求</button>
<h3>{{msg}}</h3>
<button @click='sendAjaxByPost'>发Post请求</button>
<h3>{{msg}}</h3>
</div>
`,
methods:{
sendAjax(){
axios.get('http://127.0.0.1:8081/create')
.then(res=>{
console.log('这是成功',res);
console.log('这是成功res.data',res.data)
console.log('这是typeof',typeof res.data)
this.msg = res.data;
// this.msg = '你好啊';
})
.catch(err=>{
console.log('这是错误',err)
})
},
sendAjaxByPost(){
// var params = new URLSearchParams() ;
// params.append('name','alex');
axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
then( function(res) {
console.log(res);
}).catch(err=>{
console.log(err);
})
}
}
}
new Vue({
el:"#app",
data(){
return {
}
},
components:{
App
},
template:'<App/>'
})
</script>
</body>
</html >
会报错
post请求,发送数据会报错,不能直接携带数据,要加URLSearchParams处理下才行
var params = new URLSearchParams() ;
params.append('name','alex');
修改之后
sendAjaxByPost(){
var params = new URLSearchParams() ;
params.append('name','alex');
axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
then( function(res) {
console.log(res);
}).catch(err=>{
console.log(err);
})
}
由于axios在整个项目中是局部作用域,避免多次重复导入axios模块,可以用vue和它绑定一起
1,//方式1: 解决this的指向问题,在vue中用函数建议使用箭头函数
2,var _this = this // //解决this指向问题方法二
<!-- vue和axios都是全局的对象未来axios会成为局部作用域-->
<script type="text/javascript">
//挂载Vue.prototype.$axios = axios;使用插件
Vue.prototype.$axios = axios;
//配置公共的ur1
axios.defaults.baseURL = 'http://127.0.0.1:8800';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios</title>
</head>
<body>
<div id="app"></div>
<script type= "text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<!-- vue和axios都是全局的对象,未来axios会成为局部作用域-->
<script type="text/javascript">
//挂载Vue.prototype.$axios = axios;使用插件
Vue.prototype.$axios = axios;
//配置公共的ur1
axios.defaults.baseURL = 'http://127.0.0.1:8800';
var App = {
data(){
return{
msg:''
}
},
template:`
<div>
<button @click='sendAjax'>发Get请求</button>
<h3>{{msg}}</h3>
<button @click='sendAjaxByPost'>发Post请求</button>
</div>
`,
methods:{
sendAjax(){//方式1: 解决this的指向问题,在vue中用函数建议使用箭头函数
axios.get('http://127.0.0.1:8081/create')
// this.$axios.get('http://127.0.0.1:8081/create') // 挂载之后使用this.$axios
// .then(res=>{ //方式1: 解决this的指向问题,在vue中用函数建议使用箭头函数
.then(function(res){ // 传统函数function(res) this变成了windows对象了 , 初学者容易犯的错
console.log('这是成功',res);
console.log('这是成功res.data',res.data)
console.log('这是typeof',typeof res.data)
console.log('这是this',this) // 传统函数function(res) this变成了windows对象了
// 传统函数function(res) this变成了windows对象了, 初学者容易犯的错 解决this指向问题
this.msg = res.data;
// this.msg = '你好啊';
})
.catch(err=>{
console.log('这是错误',err)
})
},
sendAjaxByPost(){
var _this = this // //解决this指向问题方法二
var params = new URLSearchParams() ;
params.append('name','alex');
// axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
this.$axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
then( function(res) { // 传统函数function(res) this变成了windows对象了
console.log(res);
_this.msg = res.data; //解决this指向问题方法二
}).catch(err=>{
console.log(err);
})
}
}
}
new Vue({
el:"#app",
data(){
return {
}
},
components:{
App
},
template:'<App/>'
})
</script>
</body>
</html >