详解vue中多个有顺序要求的异步操作处理


Posted in Javascript onOctober 29, 2019

最近项目业务上有个需求,用户可以批量下订单,但每个订单都有一个保价费,手续费需要根据订单的价值由后台的模型算出来,然后下单的时候每个订单都需要带上这个保价费,所以其实在批量下单前,每个订单都需要执行一次后台接口,不要问我为什么不将订单都传给后台,让后台去算,现在的 业务方案是要前端每一个订单都请求一次接口去算出来,然后再批量去下单。

详解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)
 }`

执行一下,报错了,提示下单接口报错,保价费不能为空,奇怪

看一下打印

详解vue中多个有顺序要求的异步操作处理

查询完保价费之前已经调了下单接口,为什么会这样!

查了一下 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)
  }
 })
},`

执行一下,提示下单成功

看一下打印

详解vue中多个有顺序要求的异步操作处理

是我想要的效果了

原理就是通过一个promise函数,将每一次请求保价费的请求放到一个数组里,通过promise.all,去处理,然后在这个promise对面的resolve里面去执行批量下单的操作。

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

Javascript 相关文章推荐
Javascript 布尔型分析
Dec 22 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue实现设置载入动画和初始化页面动画效果
Oct 28 #Javascript
vue设置一开始进入的页面教程
Oct 28 #Javascript
Vue调用后端java接口的实例代码
Oct 28 #Javascript
原生js实现商品筛选功能
Oct 28 #Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 #Javascript
JavaScript制作3D旋转相册
Aug 02 #Javascript
微信小程序工具函数封装
Oct 28 #Javascript
You might like
对PHP PDO的一些认识小结
2015/01/23 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
军训自我鉴定
2013/12/14 职场文书
部队万能检讨书
2014/02/20 职场文书
文明村创建实施方案
2014/03/27 职场文书
校园运动会广播稿
2014/10/06 职场文书
收款委托书
2014/10/14 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
实习指导教师评语
2014/12/30 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书