vue等两个接口都返回结果再执行下一步的实例

1395 阅读 0 评论 921 点赞

我是靠谱客的博主含糊八宝粥，最近开发中收集的这篇文章主要介绍vue等两个接口都返回结果再执行下一步的实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

beforeRouteEnter (to, from, next) {
 // Promise.all 會等到數組內的 Promise 都 resolve 後才會繼續跑(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 => {
  // 執行結果會按照上面順序放在 result 數組內，所以 result[0]，代表第一個函數的 resolve 結果
  vm.product = result[0].data.product
  vm.shop = result[0].data.shop

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

补充知识：vue 中多接口请求时按顺序执行接口使用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等两个接口都返回结果再执行下一步的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持靠谱客。