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 里面去执行批量下单的操作。