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>