# 了解Axios：
Axios是專注於網絡數據請求的庫。
相比原生XMLHttpRequest對象，Axios易用。
相比於jQuery Ajax，Axios更加輕量化。
使用只需要導入axios.js文件即可用！
# axios.get請求格式:
# axios.post請求格式:
# axios基本格式：
## axios發起get請求格式：
## axios發起get請求，並使用await：
在頁面中發起 axios 請求時，可能會出現后端返回的值還沒完整，頁面就對數據進行渲染，從而導致報錯或者后端數據來不及渲染到頁面之上。因此需要用 await 來解決，其實就是實現 同步 請求。其實用.then也可以，只是它返回的是方法，處理數據太麻煩！
查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btnPost">發起POST請求</button>
<button id="btnGet">發起GET請求</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnPost').addEventListener('click', async function () {
// 如果調用某個方法的返回值是 Promise 實例，則前面可以添加 await！
// await 只能用在被 async “修飾”的方法中
// await 請求一般得到的是一個 Promise 實例，並非真實的數據
// 因此需要將真實需要的數據 data 結構出來
const { data } = await axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: 'zs',
age: 20
}
})
console.log(data)
})
document.querySelector('#btnGet').addEventListener('click', async function () {
// 解構賦值的時候，使用 : 進行重命名
// 1. 調用 axios 之后，使用 async/await 進行簡化
// 2. 使用解構賦值，從 axios 封裝的大對象中，把 data 屬性解構出來
// 3. 把解構出來的 data 屬性，使用 冒號 進行重命名，一般都重命名為 { data: res }
const { data: res } = await axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks'
})
console.log(res.data)
})
// $.ajax() $.get() $.post()
// axios() axios.get() axios.post() axios.delete() axios.put()
</script>
</body>
</html>## axios發起post請求：
## axios發起post請求案例：
查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btnGET">GET</button>
<button id="btnPOST">POST</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnGET').addEventListener('click', async function () {
/* axios.get('url地址', {
// GET 參數
params: {}
}) */
const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
params: { id: 1 }
})
console.log(res)
})
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: 'zs', gender: '女' })
console.log(res)
})
</script>
</body>
</html>