这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
theme: hydrogen
Axios是基于promise对ajax的一种封装
一、Axios的基本使用
发送无参请求
默认使用get方式发送无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:"http://localhost:3000/top/playlist",
}).then(res=>{console.log(res);})
</script>
使用指定方式发送无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:"http://localhost:3000/top/playlist",
method:'get'
}).then(res=>{console.log(res);})
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url:"http://localhost:3000/top/playlist",
method:'ｐｏｓｔ'
}).then(res=>{console.log(res);})
</script>
发送带参请求
发送带参数的get请求
axios({
url:"http://localhost:3000/playlist/detail?id=24381616",
method:'get'
}).then(res=>{console.log(res);})
<script>
axios({
url:"http://localhost:3000/playlist/detail",
method:'get',
params:{
id:'24381616',
s:'2'
}
}).then(res=>{console.log(res);})
</script>
发送带参数的post请求
<script>
axios({
url:"http://localhost:3000/playlist/tracks",
method:'post',
params:{
pid=24381616,
tracks=347231
}
}).then(res=>{console.log(res);})
</script>
<script>
axios({
url:"http://localhost:3000/playlist/tracks",
method:'post',
data:{
pid=24381616,
tracks=347231
}
}).then(res=>{console.log(res);})
</script>
//弊端： axios使用post携带参数请求默认使用application/json，而data{}格式发送的数据
是json格式的
二、Axios发送并发请求
语法
axios.all([
axios.get('url1'),
axios.get('url2')
])
PS:请求成功返回的是一个数组
例
axios.all([
axios.get('http://localhost:3000/playlist/catlist'),
axios.get('http://localhost:3000/playlist/detail',{params:{ id:'24381616'}})
]).then(res=>{
console.log(res[0])
console.log('...................')
console.log(res[1])
}).catch(err=>{console.log(err)});
补充
axios.spread方法可以将并发请求返回的数组分割,返回多少个数组就写多少个形参
例
axios.all([
axios.get('http://localhost:3000/playlist/catlist'),
axios.get('http://localhost:3000/playlist/detail',{params:{ id:'24381616'}})
]).then(
axios.spread((res1,res2)=>{
console.log(res1)
console.log(res2)
})
).catch(err=>{console.log(err)});
三、Axios全局配置
关键字：axios.defults
对于一些url或者请求超时之类的配置，如果有相同部分则可以将相同部分设置成全局配置
如
axios.defaults.baseURL = 'http://localhost:3000/playlist';
axios.defaults.timeout = 5000;
axios.get('catlist').then((res)=>{
console.log(res)
})
//设置了全局配置之后，下面的axios.geturl加不加/都可以
四、Axios实例
Axios创建实例语法：
axios.create({
baseURL:'...',
timeout:5000
})
例
let Common = axios.create({
baseURL:'http://localhost:3000/comment',
timeout:5000
});//创建axios实例
//通过实例发送ａｘｉｏｓ请求
Common({
url:'music',//歌曲评论url
params:{
id:'186016',
limit:'2'
}
}).then((res)=>{
console.log(res)
});
Common({
url:'album?id=32311,limit=2'//专辑评论url
}).then((res)=>{
console.log(res)
})
Axios实例化的好处是不同模块的接口可以实例化不同的axios实例来进行数据交互，这样代码管理会方便很多，一般创建时会把一些共同的配置封装到实例里面如baseURL
五、Axios拦截器
Axios提供两大类拦截器，一种是请求方向（request）的拦截，一种是响应方向（response）的拦截
拦截器的作用：
用于我们在网络请求的时候发起请求或者响应时对操作进行响应的处理
发起请求时可以添加网页加载的动画/强制登录
响应的时候可以进行响应的数据处理
请求拦截器
请求拦截器是在发起网络请求之前做一些操作
语法
axios.interceptors.request.use(config=>{
return config;
})
//config是形参
注意：
请求拦截器需要在axios.get()之前布置
例
axios.interceptors.request.use(config=>{
console.log('进入拦截器');
return config;
}),err=>{
console.log(err);
}
axios.get('http://localhost:3000/playlist/catlist').then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err);
})
响应拦截器
响应拦截器是在响应到达浏览器之前做一些操作,与请求拦截器不同的是，响应拦截器可以
return config.data
语法
axios.interceptors.response.use(config=>{
return config.data;
})
//config是形参
例
axios.interceptors.response.use(config=>{
console.log('进入响应拦截器');
return config.data;
}),err=>{
console.log(err);
}
axios.get('http://localhost:3000/playlist/catlist').then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err);
})
