详解详解vue中多个有顺序要求的异步操作处理中多个有顺序要求的异步操作处理
主要介绍了vue中多个有顺序要求的异步操作处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作
具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最近项目业务上有个需求，用户可以批量下订单，但每个订单都有一个保价费，手续费需要根据订单的价值由后台的模型算出
来，然后下单的时候每个订单都需要带上这个保价费，所以其实在批量下单前，每个订单都需要执行一次后台接口，不要问我
为什么不将订单都传给后台，让后台去算，现在的 业务方案是要前端每一个订单都请求一次接口去算出来，然后再批量去下
单。
那就写吧，其实就是调用批量下单的接口前，要先每个顶你单调一次查保价费的接口，想着很简单，将保存多选数据的数组遍
历，每次执行一次查保价费的接口就好，然后在遍历完后再调用下单接口
代码就这样写吧
`const $this = this
// 选中多个订单，更新保价费
// multipleSelection 批量订单的选中数组
this.multipleSelection.forEach(async(item, index) => {
console.log('第' + index + '个订单开始查询')
//将查到的保价费，赋值到insuredValue getComputationCost为查保价费接口
$this.multipleSelection[index].insuredValue = await getComputationCost({
value: item.declaredValue,
goodsTypeCode: item.goodsTypeCode,
}) || 100
console.log('第' + index + '个订单查询完成')
})
console.log('111', '开始下单')
const param = {
orders: this.multipleSelection,
}
//批量下单
const res = await batchAdd(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 = await getComputationCost({
value: item.declaredValue,
goodsTypeCode: item.goodsTypeCode,
}) || 100`
await后面的函数不行行，直接执行后面的
所以
`const param = {
orders: this.multipleSelection,
}
const res = await batchAdd(param)`
中传递到 batchAdd函数的param中的multipleSelection的insuredValue是没有值的
weixin_38516804
- 粉丝: 5
- 资源: 930
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0