vue学习-part4结合使用axios

最新推荐文章于 2022-11-05 16:29:05 发布

Ezerbel

最新推荐文章于 2022-11-05 16:29:05 发布

阅读量95

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Ezerbel/article/details/108558211

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

axios基本用法

Get

axios.get(地址?key1=val1&key2=val2).then(function(response){},function(err){})

Post

axios.post(地址,{key1:val1,key2:val2}).then(function(response),function(err){})

axios基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<input type="button" value ="get请求" class="get">
		<input type="button" value ="post请求" class="post">
		<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
			* 接口随机笑话
			*/
			document.querySelector(".get").onclick=function(){
				axios.get("https://autumnfish.cn/api/joke/list?num=1")
					 .then(function(response){
						 console.log(response);
					 },function(err){
						 console.log(err);
					 });
			}
			/*
			 * 接口用户注册	
			 */
			document.querySelector(".post").onclick=function(){
				axios.post("https://autumnfish.cn/api/user/reg",{username:"Ezerbel"})
				     .then(function(response){
						 console.log(response);
					 },function(err){
						 console.log(err);
					 })    
			}	
		</script>
	</body>
</html>

axios 结合vue

在axios中this会发生变化，所以不能直接在axios内部：使用this获取vue实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div id="app">
			<input type="button" @click="getJoke" value="获取笑话">
			<p>
				{{joke}}
			</p>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript"></script>
		<script type="text/javascript">
			
			const app = new Vue({
				el:"#app",
				data:{
					joke:"好笑的笑话",
				},
				methods:{
					getJoke:function(){
						// 在axios中this会发生变化，所以不能直接在axios内部：使用this获取vue实例
						var that = this;
						axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
							function(response){
								console.log(response);
								that.joke=response.data.jokes[0];
								// console.log(that.joke);
							},
							function(err){
								console.log(err);
							}
						)
					}
				}
			})
		</script>
	</body>
</html>

axios、vue、和风API

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div id="app">
			<input type="button" @click="getLocationID" value="获取城市ID">
			<input type="text" v-model="cityName" @keyup.enter="getLocationID" placeholder="输入城市名···">
			<p>
				{{locationID}}
			</p>
			<hr/>
			<input type="button" @click="getWeather" value="获取天气">
			<p>
				{{weatherForecast}}
			</p>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript"></script>
		<script type="text/javascript">
			
			axios.defaults.crossDomain=true
			
			const app = new Vue({
				el:"#app",
				data:{
					weatherForecast:"天气信息",
					key:"a5108355b8df4ed984e8797c6e5f1079",
					locationID:"101120504",
					cityName:""
				},
				methods:{
					getLocationID:function(){
						var that = this;
						var key = this.key;
						var cityName = this.cityName;
						axios.get(`https://geoapi.heweather.net/v2/city/lookup?location=${cityName}&key=${key}`).then(
							function(response){
								// console.log(response);
								that.locationID = response.data.location[0].id;
								that.getWeather();
							},
							function(err){
								console.log(err);
							}
						)
					},
					getWeather:function(){
						// 在axios中this会发生变化，所以不能直接在axios内部：使用this获取vue实例
						var that = this;
						var key = this.key;
						var locationID = this.locationID;
						axios.get(`https://devapi.heweather.net/v7/weather/now?location=${locationID}&key=${key}`).then(
							function(response){
								console.log(response);
								console.log("key == " + key);
								that.weatherForecast=response.data.now;
							},
							function(err){
								console.log(err);
							}
						)
					}
				}
			})
		</script>
	</body>
</html>

Ezerbel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习-part4结合使用axios

axios基本用法Getaxios.get(地址?key1=val1&key2=val2).then(function(response){},function(err){})Postaxios.post(地址,{key1:val1,key2:val2}).then(function(response),function(err){})axios基本使用在axios中this会发生变化，所以不能直接在axios内部：使用this获取vue实例<!DOCTYPE html&gt
复制链接

扫一扫

专栏目录