前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >axios库的基本使用

axios库的基本使用

作者头像
xinxin-l
发布2022-03-29 08:14:18
4680
发布2022-03-29 08:14:18
举报
文章被收录于专栏:xinxin的随笔记录

axios是一个专注于网络请求的库

CDN调用方法:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用方法:

代码语言:javascript
复制
//返回的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:

代码语言:javascript
复制
//返回的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请求

代码语言:javascript
复制

//第一种
// 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:{}})
代码语言:javascript
复制
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',{})
代码语言:javascript
复制
let {data:res}=await axios.post('http://www.liulongbin.top:3006/api/post',{
    name:'didi',
    age:16
})
//res是服务器返回的真实数据
console.log(res)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-02-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • axios.get()
  • axios.post()
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档