axios
axios是一个专注于网络请求的库
axios语法如下：
axios({ method:'请求的类型', url:’请求的URL地址', }).then(result)=>{ //.then 用来指令请求成功之后的回调函数 //形参中的result是请求成功之后的结果 }）
axios的基本使用
1.发起get请求：
<script>
//1.调用axios方法得到的返回值是Promise对象
axios({
//请求方式
method:'GET',
//请求的地址
url:'http://www.liulongbin.top:3006/api/getbooks',
//URL中的查询参数，//GTE传参用params，POST传参用data
params:{id:1},
}).then(function(result){
console.log(result.data)
})
</script>
2.发起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>
<script src="./lib/axios/dist/axios.js"></script>
<script>
//console.log(axios)
//http://www.liulongbin.top:3006/api/getbooks
//调用axios方法得到的返回值是Promise对象
axios({
//请求方式
method:'GET',
//请求的地址和axios返回值调用
url : 'http://www.liulongbin.top:3006/api/getbooks',
}).then(function(books){
console.log(books.data)
})
</script>
<!-- <script>
//1.调用axios方法得到的返回值是Promise对象
axios({
//请求方式
method:'GET',
//请求的地址
url:'http://www.liulongbin.top:3006/api/getbooks',
//URL中的查询参数，//GTE传参用params，POST传参用data
params:{id:0},
//请求体参数
//data:{}
}).then(function(result){
console.log(result.data)
})
</script> -->
<button id="btnPost">发起POST请求</button>
<button id="btnGet">发起get请求</button>
<script>
document.querySelector('#btnPost').addEventListener('click',async function(){
//1.调用axios方法得到的返回值是Promise对象
//如果调用某个方法的返回值是Promise对象，则前面可以添加 await
// awiait只能用在被async 修饰的方法中
const result = await axios({
//请求方式
method:'PSOT',
//请求的地址
url:'https://www.liulongbin.top:3006/api/post',
//URL中的查询参数，//GTE传参用params，POST传参用data
//请求体参数
data:{
name:'zs',
age:20
}
})
})
</script>
<script>
document.querySelector('#btnGet').addEventListener('click',async function(){
//1.调用axios方法得到的返回值是Promise对象
//如果调用某个方法的返回值是Promise对象，则前面可以添加 await
// awiait只能用在被async 修饰的方法中
const {data:res} = await axios({
//请求方式
method:'GTE',
//请求的地址
url:'http://www.liulongbin.top:3006/api/getbooks',
//URL中的查询参数，//GTE传参用params，POST传参用data
})
console.log(res.data)
})
</script>
</body>
</html>
3.直接发起get请求和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>
<script src="./lib/axios/dist/axios.js"></script>
<button id="btnGet">发起Get请求</button>
<button id="btnPost">发起Post请求</button>
<script>
document.querySelector('#btnGet').addEventListener('click',async function(){
const {data:res} = await axios.get(
'http://www.liulongbin.top:3006/api/getbooks'
)
console.log(res.data)
})
document.querySelector('#btnPost').addEventListener('click',async function(){
const {data:res} = await axios.post('https://uatnewapi.hezongyy.com/users/UserLogin/login',{
"username":"冷亮小号",
"password":"a123456",
"channel":1,
"timeout":604800,
"fingerprint":"cb7b467ac299d8666f6a5a47d22f0710"
})
console.log(res.content)
})
</script>
</body>
</html>
