详解vue中多个有顺序要求的异步操作处理
最近项目业务上有个需求,用户可以批量下订单,但每个订单都有一个保价费,手续费需要根据订单的价值由后台的模型算出来,然后下单的时候每个订单都需要带上这个保价费,所以其实在批量下单前,每个订单都需要执行一次后台接口,不要问我为什么不将订单都传给后台,让后台去算,现在的业务方案是要前端每一个订单都请求一次接口去算出来,然后再批量去下单。
那就写吧,其实就是调用批量下单的接口前,要先每个顶你单调一次查保价费的接口,想着很简单,将保存多选数据的数组遍历,每次执行一次查保价费的接口就好,然后在遍历完后再调用下单接口
代码就这样写吧
`const$this=this //选中多个订单,更新保价费 //multipleSelection批量订单的选中数组 this.multipleSelection.forEach(async(item,index)=>{ console.log('第'+index+'个订单开始查询') //将查到的保价费,赋值到insuredValuegetComputationCost为查保价费接口 $this.multipleSelection[index].insuredValue=awaitgetComputationCost({ value:item.declaredValue, goodsTypeCode:item.goodsTypeCode, })||100 console.log('第'+index+'个订单查询完成') }) console.log('111','开始下单') constparam={ orders:this.multipleSelection, } //批量下单 constres=awaitbatchAdd(param) console.log('222','下单完成') if(res.code===RESPONSE_SUCCESS){ this.$message({ message:'下单成功', type:'success', }) }else{ this.$message.error(res.msg) }`
执行一下,报错了,提示下单接口报错,保价费不能为空,奇怪
看一下打印
查询完保价费之前已经调了下单接口,为什么会这样!
查了一下async函数会返回一个Promise对象,当函数执行的时候,一旦遇到await关键字就会先返回,其实就是跳出async函数体,等到触发的异步操作完成,再接着执行函数体内后面的语句,而这个async函数返回一个值时,Promise的resolve方法会负责传递这个值;当async函数抛出异常的时候,Promise的reject方法会传递这个异常值
意思是
`$this.multipleSelection[index].insuredValue=awaitgetComputationCost({ value:item.declaredValue, goodsTypeCode:item.goodsTypeCode, })||100`
await后面的函数不行行,直接执行后面的
所以
`constparam={ orders:this.multipleSelection, } constres=awaitbatchAdd(param)`
中传递到batchAdd函数的param中的multipleSelection的insuredValue是没有值的
也就为什么会提示保价费不能为空
那如果我需要在forEach中的await执行完之后再执行后面的await那要怎么做呢
来点知识普及:await返回Promise对象的处理结果,实际就是Promise的回调函数resolve的参数;如果等待的不是Promise对象,则返回值本身
我们都知道Promise是一个立即执行函数,但是他的成功(或失败:reject)的回调函数resolve却是一个异步执行的回调。当执行到resolve()时,这个任务会被放入到回调队列中,等待调用栈有空闲时事件循环再来取走它。
foreach的参数仅仅一个参数回调而foreach本身并不是一个AsyncFunction所有foreach循环本身并不能实现await效果。
我将代码这样修改
`//单个订单查询保价费 asyncFn(item,index){ returnnewPromise(async(resolve,reject)=>{ //console.log('000','查询保费') constres=awaitgetComputationCost({ value:item.declaredValue, goodsTypeCode:item.goodsTypeCode, }) console.log(res,index) resolve({ res:res, index:index, }) }) }, asyncsetOrder(){ if(this.multipleSelection.length===0){ returnthis.$message.error('请先选择要下单的订单') } constarray=[] const$this=this //选中多个订单,更新保价费 this.multipleSelection.forEach((item,index)=>{ array.push(this.asyncFn(item,index).then(res=>{ //console.log(index,res) $this.multipleSelection[index].insuredValue=res.data||100 })) }) Promise.all(array).then(async(result)=>{ //console.log('all',result) //console.log('666','开始下单') constparam={ orders:this.multipleSelection, } constres=awaitbatchAdd(param) //console.log('下单完成',res) if(res.code===RESPONSE_SUCCESS){ this.$message({ message:'下单成功', type:'success', }) }else{ this.$message.error(res.msg) } }) },`
执行一下,提示下单成功
看一下打印
是我想要的效果了
原理就是通过一个promise函数,将每一次请求保价费的请求放到一个数组里,通过promise.all,去处理,然后在这个promise对面的resolve里面去执行批量下单的操作。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。