vue结合axios异步通信

今天来学习关于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即可
• 和本地应用的最大区别就是改变了数据来源