Axios 简介网络应用及不同城市天气查询案例实现

最新推荐文章于 2022-10-22 20:37:01 发布

Modify_QmQ

最新推荐文章于 2022-10-22 20:37:01 发布

阅读量331

点赞数

分类专栏： # vue2 文章标签： axios vue 前端案例实现

本文链接：https://blog.csdn.net/qq_44973159/article/details/108610787

版权

vue2 专栏收录该内容

17 篇文章 5 订阅

订阅专栏

Axios 简介

Axios是前端最流行的axaj请求库，
react与vue官方都推荐使用axios发axaj请求
可在github上查看：https://github.com/axios/axios

axios特点

基本 promise的异步ajax请求库，即返回的是promise的对象
浏览器端 / node服务端都可以使用
支持请求 / 响应拦截器
支持请求取消
请求 / 响应数据转换
批量发送多个请求

Axios的使用

axios必须先导入才可以使用，使用以下代码进行导入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，或错误信息

简单实现Axios的 get post方法

使用的api是https://autumnfish.cn/api 在这个api当中可以获取一个笑话，或者多个笑话的内容。
第一步：定义两个按钮用于实现get和post

<input type="button" value="get" class="get" />
<input type="button" value="post" class="post" />

之后先实现get方法，如下所示：

document.querySelector(".get").onclick = function() {
	axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response) {
		console.log(response)
	},
	function(err) { //请求出错时触发
		console.log(err)
	}
	)
}

相同的道理，实现post方法，区别在于参数的传递。

document.querySelector(".post").onclick = function() {
	axios.post("https://autumnfish.cn/api/user/reg", {
		username: "yueyue1"
	}).then(function(response) {
		console.log(response)
			},function(err){
				console.log(err)
			}
	)}

案例实现：获取笑话

案例是一个单击按钮更新笑话的网页，笑话的内容是由https://autumnfish.cn/api/joke 提供的。具体怎么实现呢，如下：
第一步：导入vue axios相关的包，vue使用的是本地文件，axios是网上提供的

<script src="../vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

第二步：定义一个按钮，绑定一个单击事件 GetJoke ，并且在下方进行显示笑话的内容。
第三步：创建一个Vue对象，添加挂载点el，笑话数据joke:""，以及绑定的单击事件所对应的逻辑代码，如下所示：

GetJoke: function() {
	alert("单击")
	var that = this //this会被改变
	axios.get("https://autumnfish.cn/api/joke").then(function(response) {
		that.joke = response.data
	})
}

在这里，可以先查看response的值是什么，可以发现在response下的data就是笑话数据，其次在使用回调函数的时候，this的值会被改变，使用一个变量that进行保存。运行效果如下图所示：
在这里插入图片描述

案例实现：天气查询

基本逻辑与上面这个案例一致，这次使用http://wthrcdn.etouch.cn/weather_mini 这个api进行提供数据，只不过使用这个api后面需要跟上参数：?city="广州" 表示查询的是某一个城市的天气信息。如使用http://wthrcdn.etouch.cn/weather_mini?city=广州 对这个链接直接访问，就可以看到相关的信息。
首先：导入相关vue、axios包，以及定义一个文本输入框和一个按钮，给按钮绑定一个单击事件，表示单击按钮后进行查询，而文本输入框需要使用v-model进行数据的双向绑定，用来保存城市名称。
单击事件对应的方法中，修改api，

var that = this //回调函数,this值被改变
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(response)

之后把response打印出来，查找我们需要的信息，如下图所示：很显然，我们要的信息是response.data.data.forecast 这个数组。
在这里插入图片描述
数据有了之后，我们直接把这个数组进行保存。that.weatherArr = response.data.data.forecast 最后使用v-for把数组的内容渲染出来就可以了，<div v-for="item in weatherArr">{{item}}</div>
为例避免后续调错，以及还添加了部分css的代码，就把整体代码放在下面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天气查询</title>
		<script src="../vue.js"></script>
		<style type="text/css">
			.box {
				display: flex;
				flex-wrap: nowrap;
			}
			.icon{
				font-family: "华文行楷";
				color: #FF0000;
				font-size: 25px;
				text-align: center;
				margin-bottom: 16px;
			}
			.item {
				color: orange;
				font-size: 16px;
				margin-top: 30px;
				padding-left: 90px;
			}
		</style>
	</head>
	<body>
	<div class="icon">@CSDN 庸俗的情怀</div>
		<div id="app">
			<div style="text-align: center;">
				<input type="text" value="请输入城市" v-model="city" />
				<input type="button" value="获取" @click="Get" /><br />
			</div>
			<div class="box">
				<div v-for="item in weatherArr" class="item">
					日期 {{item.date}}<br />
					{{item.low}} ~ {{item.high}}<br />
					风向 {{item.fengxiang}}<br />
					天气 {{item.type}}<br />
					风力 {{item.fengli}}
				</div>
			</div>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				methods: {
					Get: function() {
						alert("单击")
						var that = this //回调函数,this值被改变
						axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(response) {
							console.log(response)
							//console.log(response.data.data.forecast)
							that.weatherArr = response.data.data.forecast
						})
					},
				},
				data: {
					city: '',
					weatherArr: []
				}
			})
		</script>
	</body>
</html>

运行代码查看效果图：
在这里插入图片描述

Modify_QmQ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Axios 简介网络应用及不同城市天气查询案例实现

Axios 简介axios必须先导入才可以使用，使用以下代码进行导入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>使用get或post方法即可发送对应的请求then方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容，或错误信息简单实现Axios的 get post方法使用的api是https://autumnfish.cn/api 在这个api当中可以获取一
复制链接

扫一扫