目录
一、前言
上一节我们介绍了axios的基本使用,相比于原生的ajax,它提供的方法用起来会更加的简便,那网络数据其实现在已经可以顺利获取到了,那么它如何和Vue一起使用呢?我们这一节就来介绍axios加vue,它们在一起如何使用以及需要注意什么。
二、axios+vue简单介绍
网络应用的核心就是data里面定义的数据,一部分是通过网络获取到的,所以我们在方法中发送网络请求,在响应回来之后,把服务器返回的数据,设置给data中对应的值就可以了。代码大概是这样,如下图:
我们可以看到在Vue实例的方法中,可以通过this访问到定义在data中的数据,但是在获取网络数据之后,回调函数中的this,还是之前那个吗?如果这个this不在是之前那个,我们要怎么办呢?
为了测试,我们特意准备了一个获取随机笑话的接口,请求的方式是get方式,不需要传递参数,响应内容是一条随机的笑话
三、实例代码验证
1、实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02_axios+vue_结合使用</title>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p> {{ joke }}</p>
</div>
<!--
这次axios和vue结合一起使用,所以两个文件都要导入,它们本身没有依赖的关系。
但是要保证编码位置,是在它们两导入之后。
-->
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app = new Vue({
el: "#app",
data: {
joke: "很好笑的笑话"
},
methods: {
getJoke: function () {
// console.log(this.joke);//打印出来的是:"很好笑的笑话"
//axios回调函数中的this已经改变,无法访问到data中数据,
//把this保存起来,回调函数中直接使用保存的this即可
//如下:定义一个that变量进行了保存
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function (response) {
// console.log(response)//打印响应的全部数据
console.log(response.data);//打印响应中的data数据
//axios回调函数中的this已经改变,无法访问到data中数据。
// console.log(this.joke);//打印出来的是:undefined
that.joke = response.data;
}, function (err) { })
}
},
})
</script>
</body>
</html>
2、效果展示
运行程序显示,如下图:
点击“获取笑话”按钮,获取效果以及打印内容,如下图:
四、内容-总结
从全部定义在本地,变得有一部分数据是从网络获取的。