自学axios入门使用

最新推荐文章于 2024-06-10 15:02:11 发布

sugar-free->小粽子

最新推荐文章于 2024-06-10 15:02:11 发布

阅读量529

点赞数 1

分类专栏：笔记雍某人的Java成神之路学习总结文章标签： ajax vue.js javascript axios

若非原创，请点转载，原创不易，盗文可耻。

本文链接：https://blog.csdn.net/yongzhongyang/article/details/120789222

版权

学习总结同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

笔记

53 篇文章 0 订阅

订阅专栏

雍某人的Java成神之路

28 篇文章 0 订阅

订阅专栏

本文详细介绍了axios在Vue.js项目中的应用，包括axios的基础用法，如GET和POST请求，自定义请求配置，以及并发请求的实现。通过实例代码展示了如何利用axios进行数据交互，强调了其简洁高效的特点，并提到了axios在前后端分离项目中的重要角色。

摘要由CSDN通过智能技术生成

axios学习笔记

一、axios的介绍

vue可以实现数据的渲染，但是其与后端接口的数据交互能力很差

原因是vue本身不具备通信能力，通常结合axios来使用，故此有一种说法前端常常使用vue+axios实现与后端的交互功能。

究竟什么是axios呢？所谓的axios其实是一个专注于异步通信的js框架来使用。

axios数据通信
vue数据渲染

二、axios入门使用

原生的ajax——实现步骤复杂
jQuery笨重繁琐
axios 简洁、高效、对RESTful支持良好。

案例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios的入门使用</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.min.js"></script>
		
	</head>
	<body>
		<div id="container">
			<button type="button" @click="test1">测试1</button>
			
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:"#container",
				data:{
					test1:function(){
						//通过开发文档发送异步请求
						//axios.get(url).then(fn);
						//axios.get(url,{}).then(fn);
						axios.get("http://localhost:9999/music/detail",{
							params:{id:"25640392"},
							})
							.then(function(res){
							console.log(res);
						});
					}
				}
			});
			
		</script>
	</body>
</html>

2.1、get请求

axios.get(url).then(fn)
axios.get(url,{}).then(fn)

//通过开发文档发送异步请求
						//axios.get(url).then(fn);
						//axios.get(url,{}).then(fn);
						axios.get("http://localhost:9999/music/detail",{
							params:{id:"25640392"},
							})
							.then(function(res){
							console.log(res);
						});

2.2、post请求

axios.post(url,{}).then(fn)

axios.post("http://localhost:9999/music/search",{s:"周杰伦"}).then(function(res){
console.log(res);
});

2.3、自定义请求

自定义请求：自定义请求方式、请求参数、请求头、请求体(post)

axios({
							url:"http://localhost:9999/music/search",
							method:"post",
							params:{
								//设置请求行传值
								s:"成都",
								limit:15
								
							},
							headers:{
								//设置请求头
								
							},
							data:{
								//设置请求体（post/put）
								
							}
						}).then(function(res){
							console.log(res);
						});

2.4、并发请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>并发请求</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.min.js"></script>
	</head>
	<body>
		<div id="container">
			<button type="button" @click="test1">测试1</button>

		</div>

		<script type="text/javascript">
			var vm = new Vue({
					el: "#container",
					methods: {
						test1:function(){
							//发送异步请求
							axios.all([listMusics(),getMusicDetail()]).then(axios.spread(function(res1,res2){
								//两个请求同时执行
								console.log(res1);
								console.log(res2);
							}));
						}

					}
				)
			};
			
			function listMusics(){
				return axios.get("http://localhost:9999/music/search?s=成都");
			}
			function getMusicDetail(){
				return axios.get('http://localhost:9999/music/detail?id=25640392');
			}
		</script>
	</body>
</html>

2.5、箭头函数

axios中的回调函数的参数res说明://res并不是接口返回的数据而是表示一个响应对象；res.data才表示接口响应的数据
箭头函数的案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>箭头函数</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.min.js"></script>
	</head>
	<body>
		<div id="container">
			<table>
				<tr>
					<td>{{song.name}}</td>
				</tr>
			</table>
			<button type="button" @click="test1">测试1</button>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
					el: "#container",
					data:{
						song:{	
						}
					},
					methods:{
						test1:function(){
							axios.get("http://localhost:9999/music/detail?id=25640392").then((res)=>{
								//res并不是接口返回的数据而是表示一个响应对象；res.data才表示接口响应的数据
								if(res.data.code==200){
									this.song=res.data.songs[0];
									//console.log(song)
								}	
							});
						}
					}
				});
			
			/* function listMusics(){
				return axios.get("http://localhost:9999/music/search?s=成都");
			}
			function getMusicDetail(){
				return axios.get('http://localhost:9999/music/detail?id=25640392');
			} */
		</script>
	</body>
</html>

三、总结

今天是我抽空余的时间学的axios基本使用，其作用多用于前后端分离项目中的异步交互，常常与vue一起使用，其中语法类似于ajax更多的案例可以参照我文章开头的那个链接

sugar-free->小粽子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
自学axios入门使用

axios学习笔记一、axios的介绍vue可以实现数据的渲染，但是其与后端接口的数据交互能力很差原因是vue本身不具备通信能力，通常结合axios来使用，故此有一种说法前端常常使用vue+axios实现与后端的交互功能。究竟什么是axios呢？所谓的axios其实是一个专注于异步通信的js框架来使用。axios数据通信vue数据渲染二、axios入门使用原生的ajax——实现步骤复杂jQuery笨重繁琐axios 简洁、高效、对RESTful支持良好。案例如下：<!
复制链接

扫一扫