溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近項目業務上有個需求，用戶可以批量下訂單，但每個訂單都有一個保價費，手續費需要根據訂單的價值由后臺的模型算出來，然后下單的時候每個訂單都需要帶上這個保價費，所以其實在批量下單前，每個訂單都需要執行一次后臺接口，不要問我為什么不將訂單都傳給后臺，讓后臺去算，現在的 業務方案是要前端每一個訂單都請求一次接口去算出來，然后再批量去下單。
那就寫吧，其實就是調用批量下單的接口前，要先每個頂你單調一次查保價費的接口，想著很簡單，將保存多選數據的數組遍歷，每次執行一次查保價費的接口就好，然后在遍歷完后再調用下單接口
代碼就這樣寫吧
`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里面去執行批量下單的操作。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
