詳解vue中多個有順序要求的異步操作處理

更新時間：2019年10月29日 08:31:11 作者：一舧

這篇文章主要介紹了vue中多個有順序要求的異步操作處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

最近項目業(yè)務上有個需求，用戶可以批量下訂單，但每個訂單都有一個保價費，手續(xù)費需要根據訂單的價值由后臺的模型算出來，然后下單的時候每個訂單都需要帶上這個保價費，所以其實在批量下單前，每個訂單都需要執(zhí)行一次后臺接口，不要問我為什么不將訂單都傳給后臺，讓后臺去算，現(xiàn)在的業(yè)務方案是要前端每一個訂單都請求一次接口去算出來，然后再批量去下單。

那就寫吧，其實就是調用批量下單的接口前，要先每個頂你單調一次查保價費的接口，想著很簡單，將保存多選數(shù)據的數(shù)組遍歷，每次執(zhí)行一次查保價費的接口就好，然后在遍歷完后再調用下單接口

代碼就這樣寫吧

`const $this = this

 // 選中多個訂單，更新保價費
 // multipleSelection 批量訂單的選中數(shù)組
 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)
 }`

執(zhí)行一下，報錯了，提示下單接口報錯，保價費不能為空，奇怪

看一下打印

查詢完保價費之前已經調了下單接口，為什么會這樣！

查了一下 async函數(shù)會返回一個Promise對象，當函數(shù)執(zhí)行的時候，一旦遇到await關鍵字就會先返回，其實就是跳出async函數(shù)體，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內后面的語句，而這個async函數(shù)返回一個值時，Promise的resolve方法會負責傳遞這個值；當async函數(shù)拋出異常的時候，Promise的reject方法會傳遞這個異常值

意思是

`$this.multipleSelection[index].insuredValue = await getComputationCost({
   value: item.declaredValue,
   goodsTypeCode: item.goodsTypeCode,
  }) || 100`

await后面的函數(shù)不行行，直接執(zhí)行后面的

所以

`const param = {
  orders: this.multipleSelection,
 }
 const res = await batchAdd(param)`

中傳遞到 batchAdd函數(shù)的param中的multipleSelection的insuredValue是沒有值的

也就為什么會提示保價費不能為空

那如果我需要在forEach中的await執(zhí)行完之后再執(zhí)行后面的 await那要怎么做呢

來點知識普及：await 返回Promise對象的處理結果，實際就是Promise的回調函數(shù)resolve的參數(shù)；如果等待的不是Promise對象，則返回值本身

我們都知道Promise是一個立即執(zhí)行函數(shù)，但是他的成功（或失?。簉eject）的回調函數(shù)resolve卻是一個異步執(zhí)行的回調。當執(zhí)行到resolve()時，這個任務會被放入到回調隊列中，等待調用棧有空閑時事件循環(huán)再來取走它。

foreach的參數(shù)僅僅一個參數(shù)回調而foreach本身并不是一個 AsyncFunction 所有foreach循環(huán)本身并不能實現(xiàn)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)
  }
 })
},`

執(zhí)行一下，提示下單成功

看一下打印