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


Posted in Javascript onSeptember 08, 2020

next 只能?用一次,??可以用 Promise.all 解?Q,等待????步操作都返回?果後再 next:

beforeRouteEnter (to, from, next) {
 // Promise.all ??鹊?到M?鹊 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 => {
  // ?绦薪Y果??凑丈厦骓?序放在 result ?到M?龋?? 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等两个接口都返回结果再执行下一步的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 子窗体父窗体相互传值方法
May 31 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
基于postman获取动态数据过程详解
Sep 08 #Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 #Javascript
如何区分vue中的v-show 与 v-if
Sep 08 #Javascript
谈谈JavaScript中的函数
Sep 08 #Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 #Javascript
浅析JavaScript 函数柯里化
Sep 08 #Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 #Javascript
You might like
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
js对象的比较
2011/02/26 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
vue组件学习教程
2017/09/09 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
关于python 跨域处理方式详解
2020/03/28 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
python代码实现猜拳小游戏
2020/11/30 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
司马光教学反思
2014/02/01 职场文书
出生公证委托书
2014/04/03 职场文书
收款委托书范本
2014/09/11 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
2015新年寄语大全
2014/12/08 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
党章学习心得体会2016
2016/01/14 职场文书
个人业务学习心得体会
2016/01/25 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript