axios库的基本使用

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()

• 调用格式： 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()

• 调用格式： axios.post('url',{})

let {data:res}=await axios.post('http://www.liulongbin.top:3006/api/post',{
    name:'didi',
    age:16
})
//res是服务器返回的真实数据
console.log(res)