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 相关文章推荐
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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 函数使用方法与函数定义方法
2010/05/09 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
Javascript中replace()小结
2015/09/30 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python文件排序的方法总结
2020/09/13 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
经典c++面试题六
2012/01/18 面试题
应届生保险求职信
2013/11/11 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
运动会广播稿500字
2014/01/28 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
逃课检讨书范文
2015/05/06 职场文书
2015教师节通讯稿
2015/07/20 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP