位置: IT常识 - 正文

vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求(vue3项目搭建)

编辑:rootadmin
vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求 vue3 async和await联合调用接口 🔥一文搞定🔥点击进入vue专栏🔥async/await定义async/await用法🔥async/await的基本用法async/await的使用场景async/await实战🔥🔥处理一个异步请求处理多个异步请求summary🔥点击进入vue专栏🔥

推荐整理分享vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求(vue3项目搭建),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3项目搭建,vue3最佳实践,vue3.0实例,vue3最佳实践,vue3jsx,vue3项目案例,vue实战项目例子,vue实战项目例子,内容如对您有帮助,希望把文章链接给更多的朋友!

上期推文中讲述了vue3项目实战中接口调用的相关知识点,介绍了调用接口的过程和简要方法。🔥点击复习vue3项目实战中接口的调用🔥 从本期文章开始将会不定时更新 vue3项目实战中接口调用的三大方法。👏👏👏本期文章将重点介绍vue3的 async和await实现异步请求接口 (👏👏👏欢迎大佬们多多指教!)

async/await定义

在进行实际开发时会遇到异步请求的问题,这时候我们异步请求的存在就非常具有合理性了。

async 是异步的意思,而 await 是等待的意思,await 用于等待一个异步任务执行完成的结果。

🔥1.async/await 是一种编写异步代码的新方法(以前是采用回调和 promise)。 2. async/await 是建立在 promise 的基础上。 3. async/await 像 promise 一样,也是非阻塞的。 🔥4. async/await 让异步代码看起来、表现起来更像同步代码。

async/await用法🔥async/await的基本用法async/await是ES7引入的新语法,可以更加方便的进行异步操作async关键词用于函数上(async函数的返回值是Promise实例对象)await关键子用于async函数当中(await可以得到异步的结果)

👇👇 基本格式 如下:

async function queryData(id) {const ret = await axios.get('/data');return ret;}queryData.then(ret=>{console.log(ret)})

示例1(详细版含注解): 源码:

const initGetList = async () => { // 函解构用async和await包裹 const {data:res} = await getList(data) // 获取接口调用函数getList中的值data 其中data是表单里的数据 // 对data进行解构赋值 取出请求的结果res console.log(res) // 控制台打印结果 => 请求成功 code为200 data.list = res.data // 将请求结果的data值赋给data.list 方便表格table与之数据双向绑定}initGetList() //调用函数

这是一个请求后端接口,并将数据返回到后台管理的table表格上的例子。

vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求(vue3项目搭建)

template部分代码:(UI组件库使用的是Ant Design Vue)

<a-table :data-source="data.list" :columns="columns" style="width:100%"></a-table>

示例2:

// 配置请求的基准URL地址axios.defaults.baseURL = 'http:localhost:3000'; //axios请求接口 axios.get('adata').then(function(ret){ console.log(ret.data) }) //async请求接口 await后面是Promise实例对象 async function queryData() { var ret = await axios.get('adata'); // console.log(ret.data) return ret.data; } queryData().then(function (data) { // 赋值过程 console.log(data) })//服务器端的接口app.get('/adata', (req, res) => { res.send('Hello axios!')})async/await的使用场景

实际开发中,肯定会遇到关于发送请求获取数据的问题。例如:如果你遇到了 等第一个请求返回数据完,再执行第二个请求(可能第二个请求要传的参数就是第一个请求接口返回的数据) 【同步请求】这个问题,该怎么去处理呢?由于我们在不使用异步请求的情况下,默认发送多个请求是同步执行的,就会导致我们也不知道到底是哪个接口优先被执行!!!所以,我们必须要学会使用async/await实现异步请求!!!

async/await实战🔥🔥处理一个异步请求

验证登录:

源码:

// 验证登录// async 和 await 包裹需要请求的对象的值 相当于对axios的一个二次封装const handleFinish = async (value: any) => { // 表单输入完毕后点登录调用handleFinish函数 // async包裹handleFinish函数的参数value 传参 console.log(value) const {data:res} = await userLoginApi(value) // 对data解构赋值 取出请求结果res data是请求接口中存放表单数据的变量 // 先从请求接口的函数userLoginApi中获取存入的表单数据value 然后用await包裹 赋值给请求结果res console.log(res) if(res.code === 20001){ // 这里的20001来自浏览器中 要看清楚是成功的值还是失败的值 console.log('login successfully') message.success('login succesfully') // 数据验证通过弹出跳转成功提示框 // 用对话存储的方法set(送进去)一个token window.sessionStorage.setItem('token',res.data.tokenValue) // token的位置从浏览器控制台中可以得到 router.push("/home") // 数据验证成功后跳转页面 } else { message.error('请求失败 请重新输入') // 数据验证不成功则弹出错误提示框 console.log('error') }};

表格数据:(更多见示例一)

处理多个异步请求第一个异步请求的结果可以作为第二个异步请求内部的参数,进行判断等数据操作。形成链式关系

示例1:

// 配置请求的基准URL地址axios.defaults.baseURL = 'http://localhost:3000';//async请求接口 async function queryData() { var info = await axios.get('async1'); //axios传递给服务器/async2接口的info.data参数,用于接口内部判断 //传参格式:[ '地址?属性名=属性值' ]or [ ' 地址?对象= ' + '对象.属性名'] var ret = await axios.get('async2?info=' + info.data); return ret.data; } queryData().then(function(data){ console.log(data) })//服务器端的接口 app.get('/async1', (req, res) => { res.send('hello')})app.get('/async2', (req, res) => { if (req.query.info == 'hello') { res.send('async1的结果确实是hello') } else { res.send('error') }})

示例2:

const datas = async ()=> { await request.selectPies(Route.path.split('/')[3]).then(res=>{ states.ids = res.objconsole.log(res) }) //查询发帖子用户信息 await request.selectUsers(states.ids).then(res=>{ console.log(res.obj) })}datas()

这里是在vue3 setup语法糖中使用异步请求,从代码看出,第二个接口要使用第一个接口返回的数据,因此使用了异步请求。

summary

在前后端分离的开发模式下,需要访问后端接口,我们必须要懂得什么是异步请求——给接口的访问加上了顺序,防止它们无厘头的不受顺序限制发送请求!

以上就是vue3项目实战中接口调用方法——async/await用法的详细内容。后期会对剩余两种接口调用方法 fetch axios不定期更新!!

本文链接地址:https://www.jiuchutong.com/zhishi/294508.html 转载请保留说明!

上一篇:前端面试题(前端面试题目100及最佳答案)

下一篇:如何让img标签在父元素中自适应宽度或者高度,按比例显示(img标签怎么写)

  • QQ群推广的最新技巧(qq群推广效果怎么样)

    QQ群推广的最新技巧(qq群推广效果怎么样)

  • 一个营业执照能绑几个抖音号(一个营业执照能贷款多少钱)

    一个营业执照能绑几个抖音号(一个营业执照能贷款多少钱)

  • 怎样删除闲鱼订单(如何删除闲鱼订单)

    怎样删除闲鱼订单(如何删除闲鱼订单)

  • 苹果13怎么设置来电闪光灯(苹果13怎么设置墙纸和主屏幕不一样)

    苹果13怎么设置来电闪光灯(苹果13怎么设置墙纸和主屏幕不一样)

  • 订单编号可以给别人吗(订单编号给别人有危险吗)

    订单编号可以给别人吗(订单编号给别人有危险吗)

  • excel怎么选择不相邻的两列(excel怎么选择不同列)

    excel怎么选择不相邻的两列(excel怎么选择不同列)

  • 如何让手机屏幕不反光(如何让手机屏幕变得更暗)

    如何让手机屏幕不反光(如何让手机屏幕变得更暗)

  • 目前因特网上最主要的服务方式是(目前因特网最基本最重要的协议是)

    目前因特网上最主要的服务方式是(目前因特网最基本最重要的协议是)

  • 钉钉常用联系人是什么意思(钉钉常用联系人删不掉)

    钉钉常用联系人是什么意思(钉钉常用联系人删不掉)

  • 华为荣耀7无法关机(华为荣耀7无法安装软件)

    华为荣耀7无法关机(华为荣耀7无法安装软件)

  • qq扩列资料为什么一直改不了(qq扩列资料为什么保存失败)

    qq扩列资料为什么一直改不了(qq扩列资料为什么保存失败)

  • vivo怎么设置微信深色模式(vivo怎么设置微信一打开就有密码)

    vivo怎么设置微信深色模式(vivo怎么设置微信一打开就有密码)

  • 苹果手机怎么设置一个圈(苹果手机怎么设置密码锁屏)

    苹果手机怎么设置一个圈(苹果手机怎么设置密码锁屏)

  • 充电是什么能转化为什么能(充电时电能转换成什么能?)

    充电是什么能转化为什么能(充电时电能转换成什么能?)

  • wps word属于什么软件(word属于什么软件)

    wps word属于什么软件(word属于什么软件)

  • 快手怎么弄上下翻作品(快手怎么弄上下是图中间是自己)

    快手怎么弄上下翻作品(快手怎么弄上下是图中间是自己)

  • windows操作系统的主要功能是什么

    windows操作系统的主要功能是什么

  • word文档只复制文字(Word文档只复制一页平板)

    word文档只复制文字(Word文档只复制一页平板)

  • 小米9陀螺仪怎么校准(小米陀螺仪怎么自动开启)

    小米9陀螺仪怎么校准(小米陀螺仪怎么自动开启)

  • 华为拉黑电话提示什么(华为电话拉黑了对方还能收到电话提醒吗)

    华为拉黑电话提示什么(华为电话拉黑了对方还能收到电话提醒吗)

  • 腾讯怎么更换微信账号(腾讯怎么更换微信)

    腾讯怎么更换微信账号(腾讯怎么更换微信)

  • wps怎么以文档发送(wps中的文档怎么以文件发给好友)

    wps怎么以文档发送(wps中的文档怎么以文件发给好友)

  • p40什么时候发布(p40何时发布上市的)

    p40什么时候发布(p40何时发布上市的)

  • 苹果xs充电是多少w(苹果xs充电电流多少安)

    苹果xs充电是多少w(苹果xs充电电流多少安)

  • oppo退出读屏模式(oppoa9退出读屏模式)

    oppo退出读屏模式(oppoa9退出读屏模式)

  • iphone热点怎么踢人(苹果手机热点怎么踢人)

    iphone热点怎么踢人(苹果手机热点怎么踢人)

  • qq运动无法同步数据(qq运动无法同步怎么办)

    qq运动无法同步数据(qq运动无法同步怎么办)

  • 荣耀手机如何截屏长图(荣耀手机如何截取视频)

    荣耀手机如何截屏长图(荣耀手机如何截取视频)

  • 小规模纳税人场地租赁
  • 公款私存个人账户怎么处理
  • 开业费用属于什么费用
  • 公司用的摄像头
  • 外地施工如何开发票
  • 出差旅费补助报销明细表需要发票吗?
  • 财产租赁所得适用什么税率
  • 股权转让交的税如何做账
  • 公司属于亏损状态,但是法人个人收入算公司账吗
  • 坏账已核销
  • 发工资四舍五入可以吗
  • 工资薪酬所得税税率
  • 企业股权投资损失
  • 出口申报时限
  • 无偿接收股权
  • 总资产利润率计算公式是什么意思
  • 企业分立账务处理办法
  • linux批量删除
  • win10禁止使用网络
  • u盘写入扇区错误
  • 2021年8月现在还能去武汉吗
  • 上半年的业务总结几句话
  • macos big sur使用
  • citespace关键词共现分析
  • 以前年度损益调整会计分录
  • 财税2016年12号文件解读
  • 坏账准备收不回来怎么办
  • 微信小程序如何删除
  • 【简陋Web应用2】人脸检测——基于Flask和PaddleHub
  • springmvc常见问题
  • chat p
  • 四轮电车电机价格
  • apk文件包下载
  • 个体户办营业执照网上怎么申请
  • 节日购买什么礼物发放职工
  • 小微企业0税务报税流程
  • 增值税为什么不在利润表里体现
  • 固定资产变卖怎么做账务处理
  • 临时工和正式工工资不一样违法吗
  • 往来账款应该怎么记账
  • 应交税金应交增值税年底转平吗
  • 小规模教育培训怎样纳税
  • 单位订购价格
  • 出口应纳增值税
  • 员工意外险税前扣除比例
  • 非居民企业所得税
  • 凭空多出来的原材料的账务处理?
  • 公司购买银行理财产品账务处理
  • 收入 摊销
  • 社保费申报是当月的
  • 一般纳税人劳务费税率是多少2023
  • 购置固定资产支出怎么算
  • 旅游费用如何记账科目
  • 关于发票丢失的处罚
  • 所得税费用怎么计提
  • 如何获取数据库的sid
  • win7安装mysql8.0.17
  • macos sierra怎么样
  • windowsxp查ip地址
  • windowsxp改密码怎么改
  • ubuntu配置vsftpd
  • find.exe应用程序错误
  • win8创建系统映像
  • win7文件后缀名不全显示
  • win7适用ie几
  • linux怎么修改主配置文件
  • nodejs入门教程
  • 微信小程序图片加载不出来
  • 移动move命令的操作步骤是
  • nodejs如何实现数据库
  • javascript获取css
  • 删除的照片怎么还原
  • android设计模式与最佳实践 电子版
  • 周炜老婆是干什么的
  • 个人所得税申诉有什么后果
  • 空置房物业收费标准
  • 小型贸易公司怎么赚钱
  • 税务局残疾人就业保障金
  • 税务总局2019 14号
  • 工信部摩托车目录查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设