快捷導(dǎo)航

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

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

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

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

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

代碼就這樣寫吧

`const $this = this

 // 選中多個訂單，更新保價(jià)費(fèi)
 // multipleSelection 批量訂單的選中數(shù)組
 this.multipleSelection.forEach(async(item, index) => {
  console.log('第' + index + '個訂單開始查詢')
  //將查到的保價(jià)費(fèi)，賦值到insuredValue getComputationCost為查保價(jià)費(fèi)接口
  $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í)行一下，報(bào)錯了，提示下單接口報(bào)錯，保價(jià)費(fèi)不能為空，奇怪

看一下打印

查詢完保價(jià)費(fèi)之前已經(jīng)調(diào)了下單接口，為什么會這樣！

查了一下 async函數(shù)會返回一個Promise對象，當(dāng)函數(shù)執(zhí)行的時候，一旦遇到await關(guān)鍵字就會先返回，其實(shí)就是跳出async函數(shù)體，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句，而這個async函數(shù)返回一個值時，Promise的resolve方法會負(fù)責(zé)傳遞這個值；當(dāng)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是沒有值的

也就為什么會提示保價(jià)費(fèi)不能為空

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

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

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

foreach的參數(shù)僅僅一個參數(shù)回調(diào)而foreach本身并不是一個 AsyncFunction 所有foreach循環(huán)本身并不能實(shí)現(xiàn)await效果。

我將代碼這樣修改

`// 單個訂單查詢保價(jià)費(fèi)

asyncFn (item, index) {
 return new Promise(async(resolve, reject) => {
  // console.log('000', '查詢保費(fèi)')
  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
 // 選中多個訂單，更新保價(jià)費(fèi)
 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í)行一下，提示下單成功

看一下打印