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

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

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

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

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

代碼就這樣寫(xiě)吧

`const $this = this

 // 選中多個(gè)訂單，更新保價(jià)費(fèi)
 // multipleSelection 批量訂單的選中數(shù)組
 this.multipleSelection.forEach(async(item, index) => {
  console.log('第' + index + '個(gè)訂單開(kāi)始查詢(xún)')
  //將查到的保價(jià)費(fèi)，賦值到insuredValue getComputationCost為查保價(jià)費(fèi)接口
  $this.multipleSelection[index].insuredValue = await getComputationCost({
   value: item.declaredValue,
   goodsTypeCode: item.goodsTypeCode,
  }) || 100
  console.log('第' + index + '個(gè)訂單查詢(xún)完成')
 })
 console.log('111', '開(kāi)始下單')
 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)錯(cuò)了，提示下單接口報(bào)錯(cuò)，保價(jià)費(fèi)不能為空，奇怪

看一下打印

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

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

意思是

`$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是沒(méi)有值的

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

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

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

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

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

我將代碼這樣修改

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

asyncFn (item, index) {
 return new Promise(async(resolve, reject) => {
  // console.log('000', '查詢(xún)保費(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('請(qǐng)先選擇要下單的訂單')
 }
 const array = []
 const $this = this
 // 選中多個(gè)訂單，更新保價(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', '開(kāi)始下單')
  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í)行一下，提示下單成功

看一下打印

是我想要的效果了

原理就是通過(guò)一個(gè)promise函數(shù)，將每一次請(qǐng)求保價(jià)費(fèi)的請(qǐng)求放到一個(gè)數(shù)組里，通過(guò)promise.all，去處理，然后在這個(gè)promise對(duì)面的resolve里面去執(zhí)行批量下單的操作。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: