今天来学习关于vue和网络交互的使用。
请求工具的话是采用axios网络请求库来发送请求。
首先,先介绍一下axios。
1. axios
axios是基于promise(诺言)用于浏览器和node.js是http客户端。一个功能强大的网络请求库,可以发送请求和响应请求的内容。
它的特点:
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请
- 自动转换JSON数
- 浏览器支持防止CSRF(跨站请求伪造)
关于promise:
- promise是一个对象用来传递异步操作的信息,它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的api,可供进一步的处理。
- promise的出现主要是解决地狱回调的问题,比如你需要结果需要请求很多个接口,这些接口的参数需要另外那个的接口返回的数据作为依赖,这样就需要我们一层嵌套一层,但是有了Promise 我们就无需嵌套。
- promise的本质是分离异步数据获取和业务
2. axios的使用
使用axios需要先导包:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
基本使用方法
GET请求:
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
//第一个回调函数在请求响应完成后触发
.then(function (response) {
console.log(response);
})
//第二个回调函数在请求失败时触发
.catch(function (error) {
console.log(error);
});
// 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
POST请求:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
实例:
<div id="app">
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
</div>
<script>
/*
接口1:随机笑话
请求地址: https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
.then(function (response){
console.log(response);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg123123",
{username:"zhangsan"})
.then(function (response){
console.log(response);
})
}
</script>
运行效果:
点击GET请求
能看到获取到响应的6条信息。
如果响应失败?
返回相应失败信息。
点击POST请求:
返回相应信息。
3. axios+vue
vue结合axios的使用需要在vue调用的函数中使用axios的方法获取数据
示例:
<div id="app">
<button @click="getMeg">获取数据</button>
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "啥也没有"
},
methods: {
getMeg: function () {
axios.get("https://autumnfish.cn/api/joke").then
(function(response){
console.log(response.data);
},function (err) {
console.log(err);
});
}
}
});
</script>
点击获取数据。
数据是获取到了,那么按说接下来只要把数据赋值给message就可以渲染到页面上去了,就像下面这样:
<div id="app">
<button @click="getMeg">获取数据</button>
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "现在啥也没有"
},
methods: {
getMeg: function () {
axios.get("https://autumnfish.cn/api/joke").then
(function(response){
console.log(response.data);
this.message = response.data;
console.log(this.message);
},function (err) {
console.log(err);
});
}
}
});
</script>
能看到,获取到的信息赋值给了message,但是页面上的信息却没有变化。
原因是:因为多层函数嵌套的关系,this关键字会丢失,我们后面赋值的this并不是开始时的关键字。
getMeg: function () {
console.log(this.message);
axios.get("https://autumnfish.cn/api/joke").then
(function(response){
console.log(this.message);
}
从图中能看到,函数最里面的this指向已经改变了,所以对于外面的message的值是没有影响的。
解决办法:
- 定义变量,保存对象this
- 使用箭头函数,由于箭头函数具有默认指向父级调用对象obj的特点,因此也可以解决本问题
修改代码:
<div id="app">
<button @click="getMeg">获取数据</button>
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "现在啥也没有"
},
methods: {
getMeg: function () {
// var self = this; 使用变量代替this
axios.get("https://autumnfish.cn/api/joke").then
//(function(response) => {
((response) => { //使用箭头函数指向父级的this,去掉前面的function
console.log(response.data);
this.message = response.data;
// self.message = response.data; 上面用变量代替的话,这里用self赋值
console.log(this.message);
},function (err) {
console.log(err);
});
}
}
});
</script>
点击获取数据:
这样数据就能成功显示了。
vue结合axios总结:
- axios回调函数中的this已经改变,无法访问到data中数据
- 把this保存起来,回调函数中直接使用保存的this即可
- 和本地应用的最大区别就是改变了数据来源