详解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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。