Axios入门使用，Async和Await用法，解构赋值语法
<!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>
<script src="./../lib/vue.js"></script>
<script src="./../lib/axios.min.js"></script>
</head>
<body>
<!--
在后面的Vue|、
React课程中都会用到axios来请求数据。
中文官网地址: http://www.axios-js.com/
英文官网地址: https://www.npmjs.com/package/axios
-->
<button id="postBtn">postBtn</button>
<button id="postBtn2">postBtn2</button>
<button id="postBtn3">postBtn3</button>
<script>
// result对象是 Promise返回的
// const result = axios({
// method: 'GET',
// url: 'http://www.liulongbin.top:3006/api/getbooks'
// })
// result.then(res => {
// console.log(res.data)
// })
// AXIOS GET请求传参
// const result2 = axios({
// method: 'GET',
// url: 'http://www.liulongbin.top:3006/api/getbooks',
// params: { // url传参
// aaa: 100,
// vvv: 'sdas'
// }
// })
// result2.then(res => {
// console.log(res.data)
// })
let postBtn = document.querySelector('#postBtn')
postBtn.addEventListener('click', function (event) {
const result2 = axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
params: { // url传参 post请求也能传递
aaa: 100,
vvv: 'sdas'
},
data: {
name: 'zs',
age: 20
}
})
result2.then(res => {
console.log(res.data)
})
})
// 如果返回值是Promise对象，可以使用async + await简化代码块
let postBtn2 = document.querySelector('#postBtn2')
postBtn2.addEventListener('click', async function (event) {
const result2 = await axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
params: { // url传参 post请求也能传递
aaa: 100,
vvv: 'sdas'
},
data: { // 请求体传参 在GET请求中并不会携带....
name: 'zs',
age: 20
}
})
console.log(result2)
})
// 获取一部分属性对象 可以使用解构语法
let postBtn3 = document.querySelector('#postBtn3')
postBtn3.addEventListener('click', async function (event) {
/**
* 可以结构重命名
* data: res 将data属性更名为res
*
* 解决 data.data的问题
*/
const { config, data: res, headers, request, status, statusText } = await axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks'
})
console.log(res.data)
})
</script>
</body>
</html>
Axios的Post请求和GET请求
<!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>
<script src="./../lib/vue.js"></script>
<script src="./../lib/axios.min.js"></script>
</head>
<body>
<!--
在后面的Vue|、
React课程中都会用到axios来请求数据。
中文官网地址: http://www.axios-js.com/
英文官网地址: https://www.npmjs.com/package/axios
-->
<button id="getBtn">GET-BTN</button>
<button id="postBtn">POST-BTN</button>
<script>
document
.querySelector('#getBtn')
.addEventListener('click', async function(event) {
// 无参GET
// const { data: result } = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
// console.log(result)
// url带参GET
const { data: result } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
params: { id: 1 }
})
console.log(result)
})
document
.querySelector('#postBtn')
.addEventListener('click', async function(event) {
// url带参POST 对象直接是请求体
const { data: result } = await axios.post('http://www.liulongbin.top:3006/api/post', {
asdas : false
})
console.log(result)
})
</script>
</body>
</html>