一、什么是axios
目前前端圈最火的专注于网络请求的库。Vue和React项目经常需要使用。
中文官网：http://www.axios-js.com/
二、基础语法
三、得到的回复
axios返回的结果外面会再套一层，包含请求头，请求数据，状态等数据，真正的数据在data这一属性中
使用解构获得data
如果我们想直接拿到data中的内容，可以用解构的方法进行赋值，用法如下：
const { data: res } = axios(xxxxxx);
其中res就是我们要的数据
四、传参
params是URL的查询参数，就是URL后面？跟的一堆参数
data则是POST中使用的请求体参数
具体用法如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <script src="./axios.min.js"></script>
<script>
axios({
methods: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
params: {
id: 1
},
data: {
}
}).then(function(result) {
console.log(result);
});
</script>
|
五、结合async和await调用axios
如调用某个方法的返回值是Promise实力，则前面可以添加await。
await只能用在被async修饰的方法中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <body>
<button id="btnPost">发送POST请求</button>
</body>
<script src="./axios.min.js"></script>
<script>
document.querySelector('#btnPost').addEventListener('click', async
function(){
const result = await axios({
method: "POST",
url: "http://www.liulongbin.top:3006/api/post",
data: {
name: "zs",
age: 20
}
});
console.log(result);
});
</script>
|
六、基于axios.get和axios.post发出请求
axios.get：
1
2
3
4
5
6
| const { data: res } =
axios.get('http://www.liulongbin.top:3006/api/getbooks', {
params: { id: 1 }
});
|
axios.post:
1
2
3
4
5
6
| const { data: res } =
axios.post('http://www.liulongbin.top:3006/api/post', {
data: { name: 'zs', gender: '女' }
});
|