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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
基于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危险函数(disable_functions)
2012/02/23 PHP
php里array_work用法实例分析
2015/07/13 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
详解Python模块化编程与装饰器
2021/01/16 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
工程造价专业大专生求职信
2013/10/06 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
Java的Object类的九种方法
2022/04/13 Java/Android