91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2020-09-19 20:22:23 來源:腳本之家 閱讀:173 作者:一舧 欄目:web開發

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

詳解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)
 }`

執行一下,報錯了,提示下單接口報錯,保價費不能為空,奇怪

看一下打印

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

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

查了一下 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)
  }
 })
},`

執行一下,提示下單成功

看一下打印

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

是我想要的效果了

原理就是通過一個promise函數,將每一次請求保價費的請求放到一個數組里,通過promise.all,去處理,然后在這個promise對面的resolve里面去執行批量下單的操作。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

梁山县| 怀集县| 和政县| 鸡东县| 潼南县| 北海市| 新巴尔虎右旗| 左权县| 佛学| 敦煌市| 嘉禾县| 交口县| 筠连县| 镇江市| 金阳县| 肇源县| 南雄市| 新疆| 鹿泉市| 新兴县| 子长县| 沽源县| 华容县| 普安县| 文山县| 江油市| 普格县| 正阳县| 连江县| 延吉市| 宣恩县| 望江县| 宁波市| 军事| 金阳县| 荣成市| 普兰店市| 盐城市| 阿坝| 秭归县| 玛曲县|