Vue - axios

最新推荐文章于 2023-11-25 09:00:00 发布

凡小多

最新推荐文章于 2023-11-25 09:00:00 发布

阅读量100

点赞数 2

分类专栏： vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/wgh4318/article/details/120534597

版权

vue 专栏收录该内容

76 篇文章 3 订阅

订阅专栏

axios

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

axios 网址

// 导入 axios
< script src = "https://unpkg.com/axios/dist/axios.min.js" > < /script>
// 发送请求
axios.get(地址 ? key = value & key2 = values).then(function(response) {}, function(err) {})
axios.post(地址, {
	key: value,
	key2: value2
}).then(function(response) {}, function(err) {})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>axios基本使用</title>
</head>

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <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")
            // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
            .then(function (response) {
                console.log(response);
              },function(err){
                  console.log(err);
              })
        }
        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg",{username:"凡小多"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
              })
          }

    </script>
</body>
</html>

axios 和 vue 结合使用

var app = new Vue({
	el: "#app",
	data: {
		joke: "搞笑的笑话"
	},
	methods: {
		getJokes: function() {
			// this.joke = 搞笑的笑话
			const that = this;
			axios.get("地址").then(function(response) {
				// this.joke = response.data
			}, function(err) {});
		}
	}
})

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

【案例：查询天气】

服务器返回的数据比较复杂时，获取的时候需要注意层级结构

参考代码

html页面

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>天气查询</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<div class="wrap" id="app">
			<div class="search_form">
				<div class="logo"><img src="img/logo.png" alt="logo" /></div>
				<div class="form_group">
					<input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city"
						@keyup.enter="queryWeather" />
					<button class="input_sub" @click="queryWeather">
						搜 索
					</button>
				</div>
				<div class="hotkey">
					<!-- <a href="javascript:;" @click="clickSearch('北京')">北京</a>
          <a href="javascript:;" @click="clickSearch('上海')">上海</a>
          <a href="javascript:;" @click="clickSearch('广州')">广州</a>
          <a href="javascript:;" @click="clickSearch('深圳')">深圳</a> -->
					<a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a>
				</div>
			</div>
			<ul class="weather_list">
				<li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}">
					<div class="info_type">
						<span class="iconfont">{{ item.type }}</span>
					</div>
					<div class="info_temp">
						<b>{{ item.low}}</b>
						~
						<b>{{ item.high}}</b>

					</div>
					<div class="info_date">
						<span>{{ item.date }}</span>
					</div>
				</li>
			</ul>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					city: "武汉",
					forecastList: [],
					hotCitys: ["北京", "上海", "广州", "深圳"]
				},
				methods: {
					queryWeather() {
						this.forecastList = [];
						axios
							.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
							.then(res => {
								console.log(res);
								this.forecastList = res.data.data.forecast;
							})
							.catch(err => {
								console.log(err);
							})
							.finally(() => {});
					},
					clickSearch(city) {
						this.city = city;
						this.queryWeather();
					}
				}
			});
		</script>
	</body>

</html>

reset.css页面

body,
ul,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

img {
	border: 0px;
}

/* 清除浮动，解决margin-top塌陷 */
.clearfix:before,
.clearfix:after {
	content: '';
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	zoom: 1;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

index.css页面

body {
	font-family: 'Microsoft YaHei';
}

.wrap {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
	/* background:#8fd5f4; */
	/* background: linear-gradient(#6bc6ee, #fff); */
	background: #fff;

}

.search_form {
	width: 640px;
	margin: 100px auto 0;
}

.logo img {
	display: block;
	margin: 0 auto;
}

.form_group {
	width: 640px;
	height: 40px;
	margin-top: 45px;
}

.input_txt {
	width: 538px;
	height: 38px;
	padding: 0px;
	float: left;
	border: 1px solid #41a1cb;
	outline: none;
	text-indent: 10px;
}

.input_sub {
	width: 100px;
	height: 40px;
	border: 0px;
	float: left;
	background-color: #41a1cb;
	color: #fff;
	font-size: 16px;
	outline: none;
	cursor: pointer;
	position: relative;
}

.input_sub.loading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('../img/loading.gif');
}

.hotkey {
	margin: 3px 0 0 2px;
}

.hotkey a {
	font-size: 14px;
	color: #666;
	padding-right: 15px;
}

.weather_list {
	height: 200px;
	text-align: center;
	margin-top: 50px;
	font-size: 0px;
}

.weather_list li {
	display: inline-block;
	width: 140px;
	height: 200px;
	padding: 0 10px;
	overflow: hidden;
	position: relative;
	background: url('../img/line.png') right center no-repeat;
	background-size: 1px 130px;
}

.weather_list li:last-child {
	background: none;
}

/* .weather_list .col02{
    background-color: rgba(65, 165, 158, 0.8);
}
.weather_list .col03{
    background-color: rgba(94, 194, 237, 0.8);
}
.weather_list .col04{
    background-color: rgba(69, 137, 176, 0.8);
}
.weather_list .col05{
    background-color: rgba(118, 113, 223, 0.8);
} */


.info_date {
	width: 100%;
	height: 40px;
	line-height: 40px;
	color: #999;
	font-size: 14px;
	left: 0px;
	bottom: 0px;
	margin-top: 15px;
}

.info_date b {
	float: left;
	margin-left: 15px;
}

.info_type span {
	color: #fda252;
	font-size: 30px;
	line-height: 80px;
}

.info_temp {
	font-size: 14px;
	color: #fda252;
}

.info_temp b {
	font-size: 13px;
}

.tem .iconfont {
	font-size: 50px;
}

演示图
在这里插入图片描述

凡小多

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue - axios

axiosaxios 必须先导入才可以使用使用 get 或 post 方法即可发送对应的请求then 方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容,或错误信息axios 网址// 导入 axios< script src = "https://unpkg.com/axios/dist/axios.min.js" > < /script>// 发送请求axios.get(地址 ? key = value & key2 = va
复制链接

扫一扫