快捷導(dǎo)航

vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實(shí)例

更新時間：2020年09月08日 10:59:01 作者：小曦曦

這篇文章主要介紹了vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

next 只能調(diào)用一次，這邊可以用 Promise.all 解決，等待兩個異步操作都返回結(jié)果後再 next:

beforeRouteEnter (to, from, next) {
 // Promise.all 會等到數(shù)組內(nèi)的 Promise 都 resolve 後才會繼續(xù)跑(then)
 Promise.all([
  main._base({
   methodName: 'QueryProductInfo',
   productId: to.params.id
  }),
  main._base({
   methodName: 'QueryProductReview',
   type: '0',
   index: '0',
   count: '2',
   productId: to.params.id
  })
 ])
 .then( result => next( vm => {
  // 執(zhí)行結(jié)果會按照上面順序放在 result 數(shù)組內(nèi)，所以 result[0]，代表第一個函數(shù)的 resolve 結(jié)果
  vm.product = result[0].data.product
  vm.shop = result[0].data.shop

  vm.evalData = result[1].data
 }))
}

補(bǔ)充知識：vue 中多接口請求時按順序執(zhí)行接口使用await async

我就廢話不多說了，大家還是直接看代碼吧~

 async getSelectOrg () {
  console.log('----1')
  return axiosPost('/api/uum/org/orglist', {
   accessToken: localStorage.token,
   option: true}).then(response => {
   this.options_grade = []
   if (response.data.data.length > 1) {
    this.options_grade.push({
     value: '-1',
     label: '全部'
    })
    this.formInline.organization = '-1'
   } else if (response.data.data.length === 1) {
    this.formInline.organization = response.data.data[0].orgCode
   }
   for (let i = 0; i < response.data.data.length; i++) {
    let tmp = {}
    tmp.value = response.data.data[i].orgCode
    tmp.label = response.data.data[i].orgName
    this.options_grade.push(tmp)
   }
   console.log('----2')
  }).catch(err => {
   console.log(err)
  })
 },
 async getSelect () {
  await this.getSelectOrg()
  console.log('----3')
  this.searchInfo()
 }
},
mounted () {
 let that = this
 window.onresize = function () { // 定義窗口大小變更通知事件
  // _this.screenWidth = document.documentElement.clientWidth // 窗口寬度
  that.clientHeight = document.documentElement.clientHeight // 窗口高度
 }
 this.getSelect()
},

以上這篇vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)簡單的分頁功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單的分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue之事件處理和事件修飾符詳解
這篇文章主要為大家介紹了Vue之事件處理和事件修飾符，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>
2021-11-11
在Vue.js中使用Mixins的方法
本篇文章主要介紹了在Vue.js中使用Mixins的方法，Vue的Mixins是非常實(shí)用的編程方式，可以使代碼變得容易理解，有興趣的一起來了解一下
2017-09-09
Vue使用Three.js加載glTF模型的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue使用Three.js加載glTF模型的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
Vue中使用fetch讀取本地txt文件的技術(shù)實(shí)現(xiàn)
在Vue.js應(yīng)用開發(fā)中,有時我們需要從本地讀取文本文件（如 .txt 文件）并將其內(nèi)容展示在頁面上,這種需求在處理配置文件、日志文件或靜態(tài)數(shù)據(jù)時非常常見,本文將詳細(xì)介紹如何在Vue中使用 fetch API 讀取本地 .txt 文件,并提供多個示例和使用技巧
2024-10-10
Vue 組件事件觸發(fā)和監(jiān)聽實(shí)現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue 組件事件觸發(fā)和監(jiān)聽實(shí)現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-03-03
vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果
本文主要介紹了vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
vue-cli2與vue-cli3在一臺電腦共存的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli2與vue-cli3在一臺電腦共存的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue中圖片的引用方式的區(qū)別詳解
在?Vue?開發(fā)中,圖片的引用方式主要取決于圖片存放的位置,一般有四種常用的存放方式,本文將詳細(xì)分析這些方式的區(qū)別,并提供完整的代碼示例,希望對大家有所幫助
2025-02-02