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 相关文章推荐
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
js精确的加减乘除实例
Nov 14 Javascript
react-native android状态栏的实现
Jun 15 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
原生js实现俄罗斯方块
Oct 20 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
各种战术和打法的原创者
2020/03/04 星际争霸
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
关于反爬虫的一些简单总结
2017/12/13 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
上课玩手机检讨书
2014/02/08 职场文书
长城英文导游词
2015/01/30 职场文书
员工年度工作总结2015
2015/05/18 职场文书
警示教育片观后感
2015/06/17 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS