2_1_axios的基础使用

最新推荐文章于 2022-07-28 21:18:03 发布

P_ning

最新推荐文章于 2022-07-28 21:18:03 发布

阅读量135

点赞数

分类专栏： VueJS快速入门

本文链接：https://blog.youkuaiyun.com/P_ning/article/details/104907982

版权

VueJS快速入门专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios的基础使用</title>
	</head>
	<body>
		<!--
			1.axios是基于ajax的
			2.两种常见的方式:
				(1):get方式
					axios.get("地址?key1=value1&key2=value2").then(function(response){成功时执行方法},function(err){失败时执行方法})
				(2):post方式
					axios.post("地址",{key1:value1,key2:value2}).then(function(response){成功时执行方法},function(err){失败时执行方法})
		-->
		<input type="button" value="获取冷笑话(get请求)" id="getPlease" />
		<input type="button" value="用户注册(post请求)" id="postPelase" />
		<!--1.先导包-->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			document.querySelector("#getPlease").onclick = function(){
				axios.get("https://autumnfish.cn/api/joke/list?num=3")					//访问的api文档
				.then(function(response){												//请求正常时
					console.log(response);
				},function(err){														//请求错误时
					console.log(err);
				})
			}
			document.querySelector("#postPelase").onclick = function(){
				axios.post("https://autumnfish.cn/api/user/reg",{username:"zsls"})		//访问的api文档
				.then(function(response){												//请求正常时
					console.log(response);
				},function(err){														//请求错误时
					console.log(err);
				})
			}
		</script>
		
		
	</body>
</html>