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方法会传递这个异常值promise

意思是

`异步

$this.multipleSelection[index].insuredValue = await getComputationCost({

value: item.declaredValue,

goodsTypeCode: item.goodsTypeCode,

}) || 100`

await后面的函数不行行，直接执行后面的async

因此

`函数

const param = {

orders: this.multipleSelection,

}

const res = await batchAdd(param)`

中传递到 batchAdd函数的param中的multipleSelection的insuredValue是没有值的

也就为何会提示保价费不能为空this

那若是我须要在forEach中的await执行完以后再执行后面的 await那要怎么作呢

来点知识普及：await 返回Promise对象的处理结果，实际就是Promise的回调函数resolve的参数；若是等待的不是Promise对象，则返回值自己

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

foreach的参数仅仅一个参数回调而foreach自己并非一个 AsyncFunction 全部foreach循环自己并不能实现await效果。spa

我将代码这样修改

`// 单个订单查询保价费3d

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)

}

})

},`

执行一下，提示下单成功

看一下打印

code

是我想要的效果了

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