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更多的案例可以参照我文章开头的那个链接