【Vue】-06-Axios异步通信

虚拟内存会梦见进程调度嘛？

已于 2023-01-04 14:18:39 修改

阅读量112

点赞数

分类专栏： Vue学习笔记文章标签： vue.js javascript 前端

于 2023-01-04 14:04:32 首次发布

本文链接：https://blog.csdn.net/weixin_41649821/article/details/128542700

版权

Vue学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

前言
一、Axios如何从JSON获取数据

前言

参考自：https://www.axios-http.cn/docs/intro
项目地址：https://gitee.com/cnleika/vue-learning

1. Axios 是什么?

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

2. 特性

自动转换JSON数据
转换请求和响应数据
从浏览器创建 XMLHttpRequests
等等

3.安装Axios

在<head></head>中添加
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

一、Axios如何从JSON获取数据

简单来说就是从JSON文件中获取值→存入VUE实例→显示在html页面。
先看代码和效果图。

    <div id="app">
        info:{{info}}<br />
        info.name:{{info.name}}<br />
        info.age:{{info.age}}<br />
        info.sex:{{info.sex}}
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            //data:{}是VUE的一个属性，存放各类变量和对象
            //data()是VUE的一个方法，data(){return{}}指返回了一个值给data()。
            data() {
                return {
                    // 对象必须和json一致，可以为空，可以缺项，不可以初始化不存在的项。
                    info: {
                        name: null,
                        num: null,
                    }
                }
            },
            mounted() {
                //本地路径会报错，原因是js是在Chrome浏览器上运行的，不允许js随意访问用户本地文件。
				//解决方案：我换了Hbuilder编辑器，采用了里面的内置浏览器
                axios.get("./myJSON.json").then(response => (this.info = response.data));
            }
        });
    </script>

在这里插入图片描述
从代码中我们可以看到几个比较陌生的函数方法，分别是mounted、data(){}和data: {}、axios.get().then()、response等等。

以下逐个说明。

1.注册周期钩子mounted

举例来说，mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码，这部分内容位于VUE生命周期章节,在此不多做解释。
这部分功能主要是用于确保在页面显示数据前先从JSON中获取数据。,相当于进行了一次排序，告诉了解释器先干什么，后干什么。
附上官方链接：https://cn.vuejs.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks

		<div id="app"> </div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {},
				mounted() {
					alert("hello,mounted!");
				}
			});
		</script>

在这里插入图片描述
当组件完成初始渲染并创建 DOM 节点后，便弹出了一个alert对话框。

2. data()和data: {}

官网申明：组件就是一个可复用的vue的实例，这也就意味着如果你的data是一个普通的对象，那么所有复用这个实例的组件都将引用同一份数据，这就造成了数据污染！
这个时候如果我们将data封装成一个函数，我们在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染。

使用data: {}这种方式的数据会在项目的全局可见，会造成变量污染,
把data包裹成函数以后，变量只在当前组件中生效，不会影响其他组件

故以后大家都用data-return方法吧！

3. Axios获取JSON【重点】

参考自：https://www.axios-http.cn/docs/api_intro

3.1 创建myJSON.json

与html同一目录下

{
    "name": "张三",
    "age": 18,
    "sex": "男"
}

3.2 GET方法

发起GET请求，请求成功后，会得到一个响应response。

axios.get("./myJSON.json");

3.3 then方法

当使用 then 时，您将接收如下响应。

axios.get("./myJSON.json").then(response => (console.log(response)));

在这里插入图片描述
通过效果图我们可以看到Axios成功从JSON文件中取出相应的值，为下一步显示到html页面打好了基础。

3.4 将response值存入Vue实例中

axios.get("./myJSON.json").then(response => (this.info = response.data));

this.info = response.data会将JSON取出的response.data赋值给info: {},通过return返回给data()，再存放至VUE的实例中。
之后我们便可以通过访问{{info}}来获取相应的值。

3.5 在html显示获取的JSON值

		<div id="app">
			info:{{info}}<br />
			info.name:{{info.name}}<br />
			info.age:{{info.age}}<br />
			info.sex:{{info.sex}}
		</div>

在这里插入图片描述

4. 总代码

myJSON.json

{
    "name": "张三",
    "age": 18,
    "sex": "男"
}

07_Axios异步通信.html

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
		<meta charset="UTF-8">
		<title>07_Axios异步通信</title>
	</head>
	<body>
		<div id="app">
			info:{{info}}<br />
			info.name:{{info.name}}<br />
			info.age:{{info.age}}<br />
			info.sex:{{info.sex}}
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				//data:{}是VUE的一个属性，存放各类变量和对象
				//data()是VUE的一个方法，data(){return{VM}}指返回了一个对象给data()。
				data() {
					return {
						// 对象必须和json一致
						info: {
							name: null,
							num: null,
						}
					}
				},
				mounted() {
					//本地路径会报错，原因是js是在浏览器上运行的，不允许js随意访问用户本地文件。
					//解决方案：我换了Hbuilder编辑器，采用了里面的内置浏览器
					axios.get("./myJSON.json").then(response => (this.info = response.data));
				}
			});
		</script>
	</body>
</html>