axios结合vue的初步应用
程序员文章站
2022-03-05 09:27:23
...
axios结合vue的初步应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios_vue结合实现</title>
</head>
<body>
<div id="app">
<button @click="getJock">获取笑话</button>
<p>{{ jock }}</p>
</div>
<script src="js/vue.js"></script>
<!-- 官网提供的 axios 在线 cdn -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
/*
接口： 随机获取一条笑话
请求地址： https://autumnfish.cn/api/joke
请求方法： get
请求参数： 无
响应内容： 随即笑话
*/
let app = new Vue({
el: "#app",
data: {
jock: '好好笑的笑话',
},
methods: {
getJock: function() {
// 此时的this 是 vue实例对象的this，可以获取到data的数据 ，但是axios中的this就是window对象了
// 所以，我们可以将this保存起来，在下面进行引用
let that = this
axios.get("https://autumnfish.cn/api/joke").then(function(response){
// 此时就可以调用that 然后将返回值直接进行赋值，此时就可以获取到vue是对象中data数据了
that.jock = response.data
}, function(err){
console.log(err)
})
}
}
})
</script>
<!--
总结:
1. axios回调函数中的this已经改变,无法访问到data中的数据
2. 把this保存起来,在回调函数中直接使用保存的this即可
3. 和本地应用的最大区别就是改变了 数据来源
-->
</body>
</html>