微信小程序框架_详解vue中多个有顺序要求的异步

摘要: 详细说明vue中有个有次序规定的多线程实际操作解决 本文关键详细介绍了vue中有个有次序规定的多线程实际操作解决,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习...

详解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是没有值的

也就为什么会提示保价费不能为空

那如果我需要在forEach中的await执行完之后再执行后面的 await那要怎么做呢

来点知识普及:await 返回Promise对象的处理结果,实际就是Promise的回调函数resolve的参数;如果等待的不是Promise对象,则返回值本身

我们都知道Promise是一个立即执行函数,但是他的成功(或失败:reject)的回调函数resolve却是一个异步执行的回调。当执行到resolve()时,这个任务会被放入到回调队列中,等待调用栈有空闲时事件循环再来取走它。

foreach的参数仅仅一个参数回调而foreach本身并不是一个 AsyncFunction 所有foreach循环本身并不能实现await效果。

我将代码这样修改

`// 单个订单查询保价费
asyncFn (item, index) {
 return new Promise(async(resolve, reject) = {
 // console.log('000', '查询保费')
 const res = await getComputationCost({
 value: item.declaredValue,
 goodsTypeCode: item.goodsTypeCode,
 console.log(res, index)
 resolve({
 res: res,
 index: index,
async setOrder() {
 if (this.multipleSelection.length === 0) {
 return this.$message.error('请先选择要下单的订单')
 const array = []
 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', '开始下单')
 const param = {
 orders: this.multipleSelection,
 const res = await batchAdd(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里面去执行批量下单的操作。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序模板市场