快速入门Vue第四天：Vue网络应用 axios

最新推荐文章于 2022-05-14 13:05:02 发布

青小俊

最新推荐文章于 2022-05-14 13:05:02 发布

阅读量242

点赞数

分类专栏：编程开发文章标签： vue javascript js

本文链接：https://blog.csdn.net/a597934448/article/details/107116795

版权

编程开发专栏收录该内容

45 篇文章 0 订阅

订阅专栏

文章目录

- 网络应用

网络应用

之前我们学习了vue本地应用，通过vue提供的指令对本地的数据执行操作，但是现在很少有纯本地的应用，或多或少都会进行网络的交互，所以我们来学习vue网络应用，结合网络数据开发。

一、axios

常见的网络请求库，功能单一就是发送请求，容量小，ajax的精封装，可方便地和vue结合。

（1）、axios的基本使用

首先导包:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 导包之后就会注册一个全局的axios对象
get请求： axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
post请求：axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
then方法中的回调函数会在请求成功或者失败时触发
通过回调函数的形参可以获取相应内容或错误信息
axios官网：https://github.com/axios/axios

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue</title>
		<script src="js/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<input type="button" value="get请求" class="get" />
		<input type="button" value="post请求" class="post" />
	<script>
		document.querySelector(".get").onclick = function (){
			axios.get("https://autumnfish.cn/api/joke")
			.then(
				function(response){
					console.log(response);
				},function(err){
					console.log(err);
				}
			)
		}
			</script>
	</body>
</html>

效果如图：
axios获取笑话

（2）、axios+vue的使用

axios如何结合vue开发网络应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue</title>
		<script src="js/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="获取笑话" @click="getjoke"/>
			<p>{{joke}}</p>
		</div>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				joke:"一个笑话"
			},
			methods:{
				getjoke:function(){
					var that = this; //进入了axios对象中,vue的原本的this会发生改变,故设之。
					axios.get("https://autumnfish.cn/api/joke")
					.then(
						function(response){
							that.joke = response.data;
						},
						function(err){}
					)
				}
			}
		})
	</script>
	</body>
</html>

效果如图：
笑话效果

$\color{#FF0000}{axios}$ 回调函数中的 $\color{#FF0000}{this}$ 已经改变,无法访问到 $\color{#FF0000}{data}$ 中数据
把 $\color{#FF0000}{this}$ 保存起来,回调函数中直接使用保存的 $\color{#FF0000}{this}$ 即可
和本地应用的最大区别就是改变了 $\color{#FF0000}{数据来源}$

二、axios 查天气

结合vue的知识利用axios做一个查询天气的网站，能够做到点击查询和输入回车查询
天知道

（1）、回车查询

按下回车（v-on .enter）、查询数据（anxios 接口 v-model）、渲染数据（v-for 数组 that）

应用的逻辑代码建议和页面 $\color{#FF0000}{分离}$
$\color{#FF0000}{axios}$ 回调函数中的this指向改变了，需要额外的保存一份
服务器返回的数据比较复杂时，获取的时候需要注意层级结构

（2）、点击查询

点击城市（v-on 自定义参数）、查询数据（ this.方法() ）、渲染数据

如图所示：
点击查询

自定义参数可以让代码的 $\color{#FF0000}{复用性}$ 更高
$\color{#FF0000}{methods}$ 中定义的方法内部，可以通过 $\color{#FF0000}{this}$ 关键字点出其他方法

青小俊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速入门Vue第四天：Vue网络应用 axios

网络应用之前我们学习了vue本地应用，通过vue提供的指令对本地的数据执行操作，但是现在很少有纯本地的应用，或多或少都会进行网络的交互，所以我们来学习vue网络应用，结合网络数据开发。一、axios常见的网络请求库，功能单一就是发送请求，容量小，ajax的精封装，可方便地和vue结合。（1）、axios的基本使用首先导包:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>axios.get
复制链接

扫一扫

专栏目录