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 08 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
js实现图片实时时钟
Jan 15 Javascript
js页面加载后执行的几种方式小结
Jan 30 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&amp;&amp;mysql)二
2006/10/09 PHP
学习php笔记 字符串处理
2010/10/19 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
js Function类型
2011/12/04 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
Python解析json文件相关知识学习
2016/03/01 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python定位xpath 节点位置的方法
2019/08/27 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
生产主管岗位职责
2013/11/10 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
国际贸易求职信
2014/07/05 职场文书
诚实守信演讲稿
2014/09/01 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
企业法人代表证明书
2014/09/27 职场文书
升职自我推荐信范文
2015/03/25 职场文书
小学教代会开幕词
2016/03/04 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
分享7个 Python 实战项目练习
2022/03/03 Python