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 变量作用域 代码分析
Jun 26 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 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
杏林同学录(二)
2006/10/09 PHP
PHP中文汉字验证码
2007/04/08 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
python连接oracle数据库实例
2014/10/17 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python3字符串操作总结
2019/07/24 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
JPA的优势都有哪些
2013/07/04 面试题
微博营销计划书
2014/01/10 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
团支部建设方案
2014/05/02 职场文书
宣传普通话标语
2014/06/27 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
2014年服务员工作总结
2014/11/18 职场文书
2014年德育工作总结
2014/11/20 职场文书
三潭印月的导游词
2015/02/12 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
英雄儿女观后感
2015/06/09 职场文书
高中军训感想
2015/08/07 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Ajax实现三级联动效果
2021/10/05 Javascript