详解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) }`
文章名称:详解vue中多个有顺序要求的异步操作处理-创新互联
URL地址:http://pwwzsj.com/article/hhhjc.html