axios是一个专注于网络请求的库
CDN调用方法:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用方法:
//返回的result是一个promise
const result=axios({
// 请求方式
method:'GET',
// 请求地址
url:'http://www.liulongbin.top:3006/api/getbooks',
//url中的查询参数
params:{},
//请求体参数
data:{}
// GET传参用params,POST传参用data
})
result.then((res)=>{
//res 是result中被封装过的data
console.log(res)
// res.data是服务器返回的真实数据
console.log(res.data)
})
发出GET请求,相关参数用params:
//返回的result是一个promise
const result=axios({
// 请求方式
method:'GET',
// 请求地址
url:'http://www.liulongbin.top:3006/api/getbooks',
//url中的查询参数
params:{id:1}
})
result.then((res)=>{
//res 是result中被封装过的data
console.log(res)
// res.data是服务器返回的真实数据
console.log(res.data)
})
POST请求
//第一种
// res是个promise
const res=axios({
method:'POST',
url:"http://www.liulongbin.top:3006/api/post",
data:{name:"san",name:11}
})
//第二种
const result=await axios({
method:'POST',
url:"http://www.liulongbin.top:3006/api/post",
data:{name:"dudu",age:3}
})
// result是个data,result.data是服务器返回的真实数据
console.log(result)
console.log(result.data)
//可以通过解构赋值获得result.data
const {data:d}=await axios({
method:"POST",
url:"http://www.liulongbin.top:3006/api/post",
data:{name:"happy",age:6}
})
// 这里的d是使用 解构赋值后的 服务器返回的真实的data
console.log(d)
axios.get('url',{params:{}})
let res = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
params: { id: 1 }
})
//res是被封装过的data数据,res.data是服务器返回的真实数据
console.log(res)
console.log(res.data)
axios.post('url',{})
let {data:res}=await axios.post('http://www.liulongbin.top:3006/api/post',{
name:'didi',
age:16
})
//res是服务器返回的真实数据
console.log(res)