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)