Axios 的基本使用（GET、POST请求）
海边的小溪鱼 2022-07-14 HTTPAxios
axios（发音:艾克C奥斯）是前端最火的、专注于数据请求的库
# Axios 的基本用法
<html>
<head>
<title>使用 axios 发起请求</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body></body>
<script>
// 1. 发起 GET 请求
axios({
method: "get", // 请求类型
url: "http://www.liulongbin.top:3006/api/getbooks", // 请求地址
params: { id: 1 } // 请求参数
})
// 请求成功后的回调函数：形参中的 result 是请求成功之后的结果(在真正的数据之外,套了一层壳)
.then((result) => {
console.log(result); // 返回值是 Promise 对象（包装的数据）
})
// 2. 发起 POST 请求
axios({
method: "post",
url: "http://www.liulongbin.top:3006/api/getbooks",
data: { name: "杰克", age: 18 }
}).then((result) => {
console.log(result);
})
</script>
</html>
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
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
# 结合 await 和 async 使用
<html>
<head>
<title>结合 await 和 async 使用</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="btnPost">发起 post 请求</button>
<script>
const btn = document.querySelector("#btnPost")
// 2. 发起 POST 请求
btn.addEventListener("click", async function() {
// 解构赋值：从 axios 包装的对象中，解构出 data 属性，并重命名为 res（解构出来的是真实的数据）
const { data: res } = await axios({
method: "post",
url: "http://www.liulongbin.top:3006/api/getbooks",
data: { name: "杰克", age: 18 }
})
console.log(res); // 得到真实的数据
})
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 终极用法
<html>
<head>
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="btnGet">发起get请求</button>
<button id="btnPost">发起post请求</button>
<script>
// 1. 发起 GET 请求
document.querySelector("#btnGet").addEventListener("click", async function () {
// 语法格式：axios.get("URL地址",{ params: {} })
const { data: res } = await axios.get("http://www.liulongbin.top:3006/api/getbooks", {
params: { id: 1 }
})
console.log(res)
})
// 2. 发起 POST 请求
document.querySelector("#btnPost").addEventListener("click", async function () {
// 语法格式：axios.post("URL地址",{ POST请求体数据 })
const { data: res } = await axios.post("http://www.liulongbin.top:3006/api/post", {
name: "杰克",
age: 18
})
console.log(res)
})
</script>
</body>
</html>
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
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